Simple slidehow with Cycle2
HTML
<section id="slideshow">
<h1>Movies</h1>
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-timeout="2000"
data-cycle-speed="200"
data-cycle-caption="#cycle-slideshow--caption"
data-cycle-caption-template="{{cycleTitle}}<span>{{slideNum}}/{{slideCount}}</span>"
>
<img data-cycle-title="Batman Vs. Superman" src="http://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SY1000_CR0,0,675,1000_AL_.jpg">
<img data-cycle-title="Captain America Civil War" src="http://ia.media-imdb.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_SY1000_CR0,0,674,1000_AL_.jpg">
<img data-cycle-title="Star Wars VII" src="http://ia.media-imdb.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SY1000_CR0,0,677,1000_AL_.jpg">
</div>
<div id="cycle-slideshow--caption"></div>
</section>
LESS
//-- Variables
//----------------------------------
@slide-width: 350px;
@slide-height: 500px;
//-- Page settings
//----------------------------------
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #333;
font-family: 'Montserrat', Arial, sans-serif;
color: #FFF;
}
//-- Slideshow
//----------------------------------
#slideshow {
width: @slide-width;
margin: 50px auto 0;
}
.cycle-slideshow {
position: relative;
width: @slide-width;
height: @slide-height;
margin: 30px auto;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
img {
height: 100%;
width: 100%;
}
}
#cycle-slideshow--caption {
width: 100%;
font-weight: 700;
span {
float: right;
font-weight: 300;
opacity: 0.5;
}
}
JAVASCRIPT
// Remember to include the external resource
// http://malsup.github.io/min/jquery.cycle2.min.js
1 Response