-
-
Save sparkbold/96ff41fb2dd36a2e2f97dc662b0fb7bd to your computer and use it in GitHub Desktop.
Slick Slider with custom controls and slide indicator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// blade template - just html really | |
@section('journal-carousel') | |
<div class="container article-carousel"> | |
<div class="row"> | |
<div class="col-sm-12"> | |
<div class="article-carousel__slider"> | |
@for ($i = 0; $i < 3; $i++) | |
<figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure> | |
@endfor | |
@for ($i = 0; $i < 3; $i++) | |
<figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure> | |
@endfor | |
</div> | |
<div class="carousel-controls"> | |
<button class="carousel-controls__next btn" type="button"><span class="fa fa-long-arrow-right"></span></button> | |
<div class="carousel-controls__indicator"> | |
<span class="indicator--current">01</span> / <span class="indicator--total">05</span> | |
</div> | |
<button class="carousel-controls__prev btn" type="button"><span class="fa fa-long-arrow-left"></span></button> | |
</div> | |
<figcaption> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, eaque.</p> | |
</figcaption> | |
</div> | |
</div> | |
</div> | |
@show |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var $slider = $('.article-carousel__slider'); | |
// Slide indicator | |
var $total = $('.carousel-controls__indicator .indicator--total'); | |
var $current = $('.carousel-controls__indicator .indicator--current'); | |
$slider.on('init afterChange', function(event, slick, currentSlide, nextSlide){ | |
$current.text(slick.currentSlide + 1); | |
$total.text(slick.slideCount); | |
}); | |
// Init slider with options | |
$slider.slick({ | |
slidesToShow: 3, | |
variableWidth: true, | |
infinite: false, | |
speed: 200, | |
arrows: false | |
}); | |
// Controls | |
// Next slide button | |
$('.carousel-controls__next').click(function() { | |
$slider.slick('slickNext'); | |
}); | |
// Prev slide button | |
$('.carousel-controls__prev').click(function() { | |
$slider.slick('slickPrev'); | |
}); | |
// Events | |
// On before slide change | |
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){ | |
$('.article-carousel figcaption').fadeOut(); | |
}); | |
// On after slide change | |
$slider.on('afterChange', function(event, slick, currentSlide, nextSlide){ | |
$('.article-carousel figcaption').fadeIn(); | |
// Slider Controls | |
// Show both control buttons if we are between the first and last slide | |
if(slick.currentSlide > 0 && slick.currentSlide + 1 < slick.slideCount){ | |
$('.carousel-controls__prev, .carousel-controls__next').css({ | |
'opacity': 1, | |
'visibility': 'visible' | |
}); | |
// Hide prev button if we are on the first slide | |
} else if(slick.currentSlide === 0) { | |
$('.carousel-controls__prev').css({ | |
'opacity': 0, | |
'visibility': 'hidden' | |
}); | |
// Hide next button if we are on the last slide | |
} else if(slick.currentSlide + 1 == slick.slideCount){ | |
$('.carousel-controls__next').css({ | |
'opacity': 0, | |
'visibility': 'hidden' | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.article-carousel{ | |
margin-bottom: 100px; | |
.slick-slider{ | |
.slick-list{ | |
overflow: visible; | |
} | |
img{ | |
max-height: calc(100vh - 50px); | |
} | |
.slick-slide{ | |
opacity: 0.5; | |
transition: opacity 0.2s ease; | |
} | |
.slick-current{ | |
opacity: 1; | |
} | |
} | |
.btn{ | |
&.carousel-controls__next, &.carousel-controls__prev{ | |
min-width: 72px; | |
height: 48px; | |
background-color: $c-yellow; | |
&:hover, &:focus{ | |
box-shadow: none; | |
background-color: $c-yellow-light; | |
} | |
} | |
&.carousel-controls__prev{ | |
visibility: hidden; | |
opacity: 0; | |
} | |
} | |
.carousel-controls{ | |
display: inline-block; | |
position: absolute; | |
top: 31.5%; | |
right: 0px; | |
} | |
.carousel-controls__indicator{ | |
height: 48px; | |
width: 72px; | |
text-align: center; | |
font-family: $f-serif; | |
font-size: 1.125rem; | |
background-color: $c-white; | |
padding-top: 10px; | |
.indicator--total{ | |
color: $c-grey; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment