Develop Reference

Setting up a Slick Carousel, containing sliders as individual elements

I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?

I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want

Slides flicker for 2nd slide with CSS transitions in swiper slider

I have created a centered mode slider(each slide having an image only) with some transition effect when the slide changes, but the slide flickers when it goes from the first to the second slide as well as from the last slide to the first slide.
$(document).ready(function () {
var mySwiper = new Swiper(".swiper-container", {
observer: true,
observeParents: true,
slidesPerView: 3,
loopedSlides: 50,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
speed: 1000,
navigation: {
nextEl: ".next-image",
prevEl: ".previous-image"
},
pagination: {
el: ".gallery-pagination",
clickable: true
}
});
mySwiper.init();
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
color: #000;
}
.swiper-container {
position: relative;
width: 80%;
}
.swiper-slide {
transition: all 1000ms linear;
transform: scale(0.75);
}
.swiper-slide-active {
transform: scale(1);
}
.image-container {
width: auto;
height: 350px;
border-radius: 9px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px;
}
.gallery-pagination {
display: flex;
justify-content: center;
margin-top: 15px;
}
.next-image {
position: absolute;
right: 0;
top: 40%;
cursor: pointer;
}
.previous-image {
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 1 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 2 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 3 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 4 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
</div>
<div class="navigation-pagination-wrapper">
<!-- Previous Navigation -->
<div class="previous-image">
<p>Prev</p>
</div>
<!-- Pagination -->
<div class="gallery-pagination"></div>
<!-- Next Navigation -->
<div class="next-image">
<p>Next</p>
</div>
</div>
</div>
https://codepen.io/suru235/pen/oNwdRzb
Have been researching possible fixes for this but cannot figure out what's wrong.
Any help will be much appreciated.
Thanks!

Swiper nav buttons outside container

I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
JSFiddle
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>

Easy, tiny and tidy.
document.querySelectorAll('.swiper-container').forEach(function(elem) {
new Swiper(elem, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: elem.nextElementSibling.nextElementSibling,
prevEl: elem.nextElementSibling,
}
});
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>

A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i++) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
JSFiddle

Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other
<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>
props: ['count'],
data() {
return {
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 45,
grabCursor: true,
centerInsufficientSlides: true,
navigation: {
nextEl: `.swiper-button-next-${this.count}`,
prevEl: `.swiper-button-prev-${this.count}`
}
}
}

.swiper-container {
width: 100%;
height: 400px;
padding: 0 50px;
}
.swiper-container::before{
content: "";
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
.swiper-container::after{
content: "";
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}

jQuery Flip: Why is only my text turning and not .card?

I'm using the jQuery Flip Plugin. I'm trying to have a couple of cards on top of each other and when the user clicks on a card, it should turn and show the backside. But now only the text is flipping and not the card behind the text. I managed to have it wokring before, but I had to make classes for front and back.
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card {
position: absolute;
width: 400px;
height: 248px;
margin: 2px;
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
#card-1 {
left: 0px;
top: 0px;
z-index: 1;
}
#card-2 {
left: 10px;
top: -238px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div>
Front1
</div>
<div>
Back1
</div>
</div>
<div class="card" id="card-2">
<div>
Front2
</div>
<div>
Back2"
</div>
</div>

From my understanding of the website, you need to add front and back classes to the corresponding div's, as shown:
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card{
width:200px;
height:100px;
position:relative;
}
.front,
.back {
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div class="front">
Front1
</div>
<div class="back">
Back1
</div>
</div>
<div class="card" id="card-2">
<div class="front">
Front2
</div>
<div class="back">
Back2
</div>
</div>

Remove parent div in product grid

Firstly I want to apologize for my English. I have a html template for shop and it has interesting structure of product grid in category page:
HTML:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
CSS:
.content-center .product-line {
position: relative;
height: 238px;
margin-bottom: 30px;
}
.content-center .product-line .product {
position: absolute;
color: #534741;
}
.content-center .product:nth-child(1) {
top: 0;
left: 0;
}
.content-center .product:nth-child(2) {
top: 0;
left: 330px;
}
.content-center .product:nth-child(3) {
top: 0;
left: 660px;
}
.content-center .product-small {
box-sizing: border-box;
width: 300px;
height: 238px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
}
.content-center .product-big {
box-sizing: border-box;
width: 630px;
min-height: 506px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
display: none;
}
JS:
$('.detail').on('click', function() {
var _this = $(this);
var parentProduct = _this.closest('.product');
var parentLine = _this.closest('.product-line');
var index = parentProduct.index();
var eq1 = parentLine.find('.product').eq(0);
var eq2 = parentLine.find('.product').eq(1);
var eq3 = parentLine.find('.product').eq(2);
$('.product-small').show();
$('.product-big').hide();
$('.product-line').css('height', '237px');
$('.product').removeAttr('style');
switch (index)
{
case 0:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '660px', 'top' : 0});
eq3.css({'left' : '660px', 'top' : '268px'});
break;
case 1:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '330px', 'top' : 0});
eq3.css({'left' : 0, 'top' : '268px'});
break;
case 2:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : 0, 'top' : '268px'});
eq3.css({'left' : '330px', 'top' : 0});
break;
}
parentProduct.find('.product-big').show();
parentProduct.find('.product-small').hide();
parentLine.css('height', parentProduct.find('.product-big').innerHeight());
});
Is it possible to make same functional but use only one block where products stored.
Now I have a lot of blocks where stored 3 products(x lines per 3 products), and I need to make only one block and unlimited products. For example make something like that:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
I'm tried to use float:left method, but when i click "detail" button the grid is braking.
Site with current functional: link

Generally, use float, but float:right every 2nd and 3rd items
selected product should have a class 'selected';
don't use style attribute (always important to separate style and content)
.product { float: left; }
.product.selected:nth-child(3n),
.product.selected:nth-child(3n+2) { float: right; }
.product.product-small { display: block; }
.product.selected .product-small { display: none; }
.product.product-big{ display: none; }
.product.selected .product-big{ display: block; }
you'll probably have problems that now #content-main is considered empty, but I believe you'll be able to manage that (try clear:both).