jQuery(document).ready(function ($) {
// Partial view image slider
if ($(‚.ds-center-slider‘).length) {
$(‚.ds-center-slider‘).slick({
centerMode: true
, centerPadding: ‚400px‘ //Affects the width of the center image
, infinite: true //Loop the images
, speed: 1000 //Slide transition speed in milliseconds
, slidesToShow: 1 // Show a single center slide
, dots: false //Display dots?
, arrows: true //Display arrows?
, autoplay: true //Autoplay?
, autoplaySpeed: 5000 //Delay between slide change in milliseconds
, prevArrow: ‚‚ //Previous arrow
, nextArrow: ‚‚ //Next arrow
, responsive: [{
breakpoint: 1400
, settings: {
centerPadding: ‚300px‘ //Affects the width of the center image
, arrows: true
}
}
, {
breakpoint: 1200
, settings: {
centerPadding: ‚200px‘ //Affects the width of the center image
, arrows: true //Display arrows?
}
}
, {
breakpoint: 980
, settings: {
centerPadding: ‚150px‘ //Affects the width of the center image
, arrows: false //Display arrows?
}
}
, {
breakpoint: 767
, settings: {
centerPadding: ‚100px‘ //Affects the width of the center image
, arrows: false //Display arrows?
}
}
, {
breakpoint: 479
, settings: {
centerPadding: ’50px‘ //Affects the width of the center image
, arrows: false //Display arrows?
}
}
]
});
}
});
/*————————————————-*/
/*——-Week 99 – Partial View Image Slider——-*/
/*————————————————-*/
/*Add padding to allow taller center image*/
.ds-center-slider .slick-list {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
/*Make center image larger*/
.ds-center-slider .slick-center {
-webkit-transform: scale(1.15);
transform: scale(1.15);
z-index: 2;
}
/*Add image transition effect*/
.ds-center-slider.slick-initialized .slick-slide {
-webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
/*Make side images semi-transparent*/
.ds-center-slider .et_pb_fullwidth_image:not(.slick-center) {
opacity: .5;
}
/*Prev/Next button styling*/
.ds-center-slider .ds-center-slider-prev,
.ds-center-slider .ds-center-slider-next {
position: absolute;
border: none;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 3;
font-size: 20px;
background: #fff;
border-radius: 50%;
height: 40px;
width: 40px;
cursor: pointer;
opacity: 0;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
}
/*Previous arrow position*/
.ds-center-slider .ds-center-slider-prev {
left: 10%;
padding: 5px 10px 5px 15px;
}
/*Next arrow position*/
.ds-center-slider .ds-center-slider-next {
right: 10%;
padding: 5px 15px 5px 10px;
}
/*Add the arrows*/
.ds-center-slider .ds-center-slider-next:before,
.ds-center-slider .ds-center-slider-prev:before {
content: “;
border: solid black;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 5px;
}
/*Rotate the arrows*/
.ds-center-slider .ds-center-slider-next:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.ds-center-slider .ds-center-slider-prev:before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
/*Show arrows on hover*/
.ds-center-slider:hover .ds-center-slider-prev,
.ds-center-slider:hover .ds-center-slider-next {
opacity: 1;
}
/*————————————————-*/
/*—–End Week 99 – Partial View Image Slider—–*/
/*————————————————-*/
