angularjs-ej1-demos/rotator/imagewithcontent.html

<div ng-controller="RotatCtrl">
    <div class="content-container-fluid">
        <div class="row">
            <div class="rotatorApi">
                <div class="cols-sample-area">
                    <div class="frame">
                        <div class="control">
                            <ul id="sliderContent" ej-rotator e-slidewidth="100%" e-slideheight="300px"
                                e-displayitemscount="1" e-navigatesteps="1" e-pagerposition="pagerposition" e-orientation="orientation"
                                e-showpager="true" e-enabled="true" e-allowkeyboardnavigation="true" e-showplaybutton="true" e-isResponsive=true e-animationtype="animationtype">
                                <li>
                                    <div class="leftPanel">
                                        <img src="content/images/rotator/tablet.jpg" />
                                    </div>
                                    <div class="rightPanel blck">
                                        <div class="contentPanel">Tablet </div>
                                        <ul>
                                            <li>A tablet computer, or simply tablet, is a mobile computer with display, circuitry and battery in a single unit.</li>
                                            <li>Tablets are equipped with sensors, including cameras, microphone, accelerometer and touchscreen. </li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="leftPanel">
                                        <img src="content/images/rotator/nature.jpg" />
                                    </div>
                                    <div class="rightPanel">
                                        <div class="contentPanel">Nature </div>
                                        <ul>
                                            <li>The health of the natural environment is critical to the long-term future of the planet</li>
                                            <li>Nature, in the broadest sense, is equivalent to the natural, physical, or material world or universe.</li>

                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="leftPanel">
                                        <img src="content/images/rotator/card.jpg" />
                                    </div>
                                    <div class="rightPanel credit">
                                        <div class="contentPanel">Credit card </div>
                                        <ul>
                                            <li>A credit card is a payment card issued to users as a system of payment</li>
                                            <li>It allows the cardholder to pay for goods and services based on the holder's promise to pay for them</li>

                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="leftPanel">
                                        <img src="content/images/rotator/rose.jpg" />
                                    </div>
                                    <div class="rightPanel">
                                        <div class="contentPanel">Rose </div>
                                        <ul>
                                            <li>A rose is a woody perennial of the genus Rosa, within the family Rosaceae</li>
                                            <li>Flowers vary in size and shape and are usually large and showy,
                            There are over 100 species
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li>
                                    <div class="leftPanel">
                                        <img src="content/images/rotator/snowfall.jpg" />
                                    </div>
                                    <div class="rightPanel rightSide">
                                        <div class="contentPanel">Snowfall </div>
                                        <ul>
                                            <li>Mt. Baker ski area in Washington State has the world record for snowfall at 1,140 inches of snow in the 1998/1999 winter season</li>
                                            <li>Mt. Baker ski area is located near but not on the real 10,781’ Mount Baker</li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style type="text/css" class="cssStyles">
        .frame {
            width: 600px;
            margin-left: 200px;
        }
		
		#sliderContent > li {
			width: 700px;
		}

        #sliderContent li img {
            width: 100%;
            height: 300px;
        }

        #sliderContent > li .leftPanel {
            float: left;
            width: 100%;
            height: 300px;
            padding-right: 0px;
        }

            #sliderContent > li .leftPanel img {
                width: 100%;
                height: 300px;
            }

        #sliderContent .rightPanel {
            background-color: #FFFFFF;
            height: 259px;
            margin-left: 8%;
            margin-top: 21px;
            opacity: 0.5;
            padding-left: 10px;
            position: absolute;
            width: 6%;
        }

            #sliderContent .rightPanel.credit {
                opacity: 0.6;
            }

            #sliderContent .rightPanel.blck {
                background-color: black;
            }

                #sliderContent .rightPanel.blck li {
                    color: white;
                    list-style: none;
                    line-height: 2;
                }

                #sliderContent .rightPanel.blck .contentPanel {
                    padding-top: 30px;
                    color: white;
                }

            #sliderContent .rightPanel .contentPanel {
                color: #000000;
                font-size: large;
                font-weight: bold;
                left: 16px;
                padding-top: 30px;
                position: relative;
            }

            #sliderContent .rightPanel li {
                color: black;
                list-style: none;
                line-height: 2;
            }

            #sliderContent .rightPanel.rightSide {
                margin-left: 20px;
                background-color: black;
            }

                #sliderContent .rightPanel.rightSide li {
                    color: white;
                    list-style: none;
                    line-height: 2;
                }

                #sliderContent .rightPanel.rightSide .contentPanel {
                    padding-top: 30px;
                    color: white;
                }

        .rightPanel > ul {
            padding: 6px 17px 17px;
        }
    </style>