Jump to content

Responsive slideshow using only w3.css


tanmoy911

Recommended Posts

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";

}

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 4000);

}

</script>

</div>

May kindly help.

Link to comment
Share on other sites

Just google 'css only slideshow', if you had gone with bootstrap you would have found it provides this feature. But! Its only for more modern browsers that support css3 animation.

 

Edit: scratch that bootstrap does use js.

Edited by dsonesuk
Link to comment
Share on other sites

Using bootstrap or any other like bx slider does have the capability. But I want to achieve only by using w3.css . The css framework provided by w3 schools. Can this be responsive when Implement this http://www.w3schools.com/w3css/w3css_slideshow.asp

Link to comment
Share on other sites

Yes! when you remove max-width: 500px; the images will stretch to width available to it.

 

To use css animation like you are attempting to do, you need to add a class reference to image or image container so it will trigger the css animation, at the moment it only work on single viewable image available to it on loading.

Link to comment
Share on other sites

Not exactly sure how you wanted orange h1 to show on layout so guessed, probably wrong but there you go.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <script type="text/javascript">

        </script>
        <style type="text/css">
            .mySlides img:first-child{max-width:100%;}

            .mySlides img:first-child + div img {width: 40%;}
            .mySlides h1, .mySlides img:first-child + div  {width: 50%;}

            /* no such class middleright or middleleft so created them*/
            .w3-display-middleright {bottom: 50%; right:0; position: absolute; text-align: center;}
            .w3-display-middleleft {position: absolute; left: 0; bottom: 70%;}


            .mySlides h1 b, .mySlides h1 i {padding-left: 15px; padding-right: 15px; font-size:1.7vw; }

            .flexbox {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                overflow: hidden;
            }
            .flexbox .mySlides {
                flex: 1;
            }

        </style>
    </head>
    <body>
        <div class="w3-container w3-padding-16" style="position:relative; width: 70%; margin: 0 auto;">
            <div class="w3-row">

                <div class="w3-display-container mySlides flexbox">
                    <img src="http://www.w3schools.com/w3css/img_la.jpg" class="w3-col" >
                    <div class="w3-display-middleright">
                        <img src="http://www.w3schools.com/w3css/img_ny.jpg" style="" alt="Portfolio 4" class="w3-animate-right">
                    </div>
                    <h1 class="w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b class="w3-orange w3-text-white"> 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>
                <div class="w3-display-container mySlides flexbox">
                    <img src="http://www.w3schools.com/w3css/img_ny.jpg" class="w3-col">
                    <div class="w3-display-middleright">
                        <img src="http://www.w3schools.com/w3css/img_chicago.jpg"  alt="Portfolio 4" class="w3-animate-right">
                    </div>
                    <h1 class="w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b class="w3-orange w3-text-white"> 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-container mySlides flexbox">
                    <img src="http://www.w3schools.com/w3css/img_chicago.jpg" class="w3-col">
                    <div class="w3-display-middleright">
                        <img src="http://www.w3schools.com/w3css/img_la.jpg" alt="Portfolio 4" class="w3-animate-right">
                    </div>

                    <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>
        </div>
        <script>
            var myIndex = 0;
            carousel();

            function carousel() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                    //var z = x[i].getElementsByTagName("img")[1];
                    x[i].style.display = "none";

                }
                myIndex++;
                if (myIndex > x.length) {
                    myIndex = 1;
                }
                //reset animation by cloning original and replace with the newer clone
                var anim_element = x[myIndex - 1];
                var anim_element_clone = anim_element.cloneNode(true);
                anim_element.parentNode.replaceChild(anim_element_clone, anim_element);

                x[myIndex - 1].style.display = "block";

                setTimeout(carousel, 4000);
            }
        </script>
    </body>
</html>
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...