I'm trying to make a slider based on Slick Slider plugin ( http://kenwheeler.github.io/slick/ )
The main point is that I have to fix a position of a slide on click. For example, if I click on slide 3, it will be stucked on its position and every other slide will go through it in an order.
For instance: if slide 3 is clicked, it turns yellow, it is on the third position. We click "Next", the 3rd slide stay fixed, but all the others have moved one position, ie visible order of numbers: 2 4 3 5 6... Thus, it always stands motionless "in its place", regardless of the slider paging. The fixation is removed by a second click, the slide remains in the same place and moves with everyone.
I have only the solution when the slide changes its place but I have to do the logic described above. Here's the code I have now: https://jsfiddle.net/tomavl/4mgLrs5t/10/
<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
<div class="slide">9</div>
</div>
body {
background: #FFF;
padding: 20px;
font-family: Helvetica;
}
.slider {
color: #333;
padding: 0 0 30px;
}
.slide {
font-size: 90px;
width: 150px;
padding: 10px 0;
margin: 0;
text-align: center;
border: 1px solid #999;
}
.slide.locked {
background: rgba(255,255,0,0.5);
}
.slick-prev, .slick-next {
position: absolute;
bottom:0;
}
.slick-next { left:80px; }
let currentFocus, nextFocus, prevFocus;
$(document).ready(function(){
$('.slider').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
}
]
});
function setForFocus() {
nextFocus = currentFocus.next();
prevFocus = currentFocus.prev();
if (prevFocus.length == 0)
prevFocus = null;
if (nextFocus.length == 0)
nextFocus = null;
}
$('.slide').on('click', function() {
if ($(this).hasClass('locked')) {
$(this).toggleClass('locked');
currentFocus = nextFocus = prevFocus = null;
} else {
if (typeof currentFocus !== "undefined" &&
currentFocus !== null)
currentFocus.toggleClass('locked');
$(this).toggleClass('locked');
currentFocus = $(this);
setForFocus();
}
});
$('.slick-next').on('click', function() {
if (typeof currentFocus !== "undefined" &&
currentFocus !== null &&
typeof nextFocus !== "undefined" &&
nextFocus !== null) {
let next_text = Number(nextFocus.text());
let cur_text = Number(currentFocus.text());
currentFocus.text(next_text);
nextFocus.text(cur_text);
currentFocus.toggleClass('locked');
nextFocus.toggleClass('locked');
currentFocus = nextFocus;
setForFocus();
}
});
$('.slick-prev').on('click', function() {
if (typeof currentFocus !== "undefined" &&
currentFocus !== null &&
typeof prevFocus !== "undefined" &&
prevFocus !== null) {
let prev_text = Number(prevFocus.text());
let cur_text = Number(currentFocus.text());
currentFocus.text(prev_text);
prevFocus.text(cur_text);
currentFocus.toggleClass('locked');
prevFocus.toggleClass('locked');
currentFocus = prevFocus;
setForFocus();
}
});
});
You can try like this:
let currentFocus; $(document).ready(function () { $('.slider').slick({ dots: false, infinite: false, speed: 300, slidesToShow: 5, slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, } }, { breakpoint: 600, settings: { slidesToShow: 2, } }, { breakpoint: 480, settings: { slidesToShow: 1, } } ] }); $('.slide').on('click', function () { $(this).toggleClass('locked'); $('.slide').not(this).removeClass('locked') currentFocus = $(this); }); $('.slick-next').on('click', function () { let next = $(currentFocus).next() if (next.length > 0) { $('.slide').removeClass('locked') next.toggleClass('locked') currentFocus = next } }); $('.slick-prev').on('click', function () { let prev = $(currentFocus).prev() if (prev.length > 0) { $('.slide').removeClass('locked') prev.toggleClass('locked') currentFocus = prev } }); });
body { background: #FFF; padding: 20px; font-family: Helvetica; }.slider { color: #333; padding: 0 0 30px; }.slide { font-size: 90px; width: 150px; padding: 10px 0; margin: 0; text-align: center; border: 1px solid #999; }.slide.locked { background: rgba(255, 255, 0, 0.5); }.slick-prev, .slick-next { position: absolute; bottom: 0; }.slick-next { left: 80px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> <div class="slider"> <div class="slide">1</div> <div class="slide">2</div> <div class="slide">3</div> <div class="slide">4</div> <div class="slide">5</div> <div class="slide">6</div> <div class="slide">7</div> <div class="slide">8</div> <div class="slide">9</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.