tanmoy911

Dear Members,

I am trying to develop a Responsive Slideshow using w3.css only. Don't want to use any other plugin. I want to achieve (http://www.free-css.com/free-css-templates/page193/mpurpose ) This effect. Below is the code it works not smooth enough though in desktop environment but fails when resize the browser window.

<div class="w3-container w3-padding-16" style="position:relative">

<div class="w3-row">

<div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg1.jpg" style="max-width:100%;" >

<div class="w3-container w3-orange">

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Garments </b></h1>

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"><i>Fashions Aperals OutFits Weres </i> </h1>

</div>

<img src="Images/12246_ultramarine_blue_b.jpg" style="position:absolute;top:25%;right:10%;width:10%" alt="Portfolio 4">

</div>

<div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg3.jpg" style="max-width:100%;">

<div class="w3-row w3-col m4 l4">

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Color Schemes </b> </h1>

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1>

</div>

<div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div>

</div>

<div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg4.jpg" style="max-width:100%;">

<div class="w3-row w3-col m4 l4">

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1>

<h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1>

</div>

<div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div>

</div>

</div>

<script>

var myIndex = 0;

carousel();

function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x.style.display = "none";