I've been trying to create something like this using slick.js, and i really can't get my head around it.
I have got the current code in place. How to make the center slide image 100% width and height and add paddings to the slide? It seems to be not working.
I'd really appreciate any help. Thanks.
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3,
adaptiveHeight: false
});
.slick-slide img {
max-width: 100%;
transition: transform 0.5s;
}
.slick-slide.slick-center img{
transform: scale(2.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
</div>
A little bit of CSS should help you out:
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
});
.slick-slide > div {
transform: scale(.5);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.slick-center > div {
transform: scale(1);
}
.slider__item > img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
</div>
The principle is simple: use transform: scale(n) to scale down all the slides (where n is your desired factor - .5 in the example above). use transform:scale(1) on the centered one (has .slide-center class) to render it at its real scale (1:1).
And add a transition on transform.
Done.
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
Complete noob and working on a project for school. I have a div with a nested div with 2 images. My main goal is when the image is hovered over, the other image changes its opacity and shows. However, I am told that divs cannot scale with the window size. Anyway, I can change my code or add something to make this happen? I added a segment of the CSS code and halfways through is the index.html code.
.container-inner {
position: relative;
}
.ball-container {
position: absolute;
left: 65%;
bottom: 18%;
}
.ball-container .label {
position: absolute;
transform: translate(-20%, -75%) scale(.7);
opacity: 0;
transition-property: all;
transition-duration: .3s;
transition-timing-function: ease-in-out;
}
.ball-container .ball-img {
position: absolute;
transform: scale(.8);
}
.ball-container:hover .label {
opacity: 1;
}
<div id="top-container" class="top-container">
<img class="bkg-img" src="images/top_container/sceneBkg.png" alt="Landscape">
<img id="large-cloud1" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="large-cloud2" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="large-cloud3" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="small-cloud1" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="small-cloud2" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img class="southpaw-body-img" src="images/top_container/southpaw_body.png" alt="head">
<img class="southpaw-head-img" src="images/top_container/southpaw_head.png" alt="body">
<img class="doghouse-label" src="images/top_container/doghouse_label.png" alt="doghouse label">
<img class="doghouse-img" src="images/top_container/doghouse.png" alt="doghouse">
<div class="book-container">
<div class="container-inner">
<img class="label" src="images/top_container/book_label.png" alt="book label">
<img class="book-img" src="images/top_container/bookStack.png" alt="book stack">
</div>
</div>
<div class="banner-container">
<div class="container-inner">
<img class="label" src="images/top_container/banner_label.png" alt="banner label">
<img class="banner-img" src="images/top_container/banner.png" alt="banner">
</div>
</div>
<div class="ball-container">
<div class="container-inner">
<img class="label" src="images/top_container/ball_label.png" alt="ball label">
<img class="ball-img" src="images/top_container/ball.png" alt="ball">
</div>
</div>
<div class="weight-container">
<div class="container-inner">
<img class="label" src="images/top_container/weight_label.png" alt="weight label">
<img class="weight-img" src="images/top_container/weight.png" alt="weight">
</div>
</div>
<img class="logo-img" src="images/top_container/logo.png" alt="body">
</div>
I want to implement a slick vertical slider with option fade: true. I want a fading effect in the vertical slider. It is showing the first slide but 2nd and 3rd slides are not visible.
Below is the code that I had tried.
$('.MySlider').slick({
vertical: true,
dots: true,
infinite: true,
speed: 500,
fade: true
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I had resolved my issue by giving my custom CSS.
$('.MySlider').slick({
dots: true,
infinite: true,
speed: 500,
vertical:true,
verticalSwiping: true
});
.slick-slide {
opacity:0;
transition:opacity 0.5s ease-out;
}
.slick-active {
opacity:1!important;
transition:opacity 0.5s ease-in;
}
.slick-cloned {
opacity: 0.3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/700/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/800/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I am trying to develop an image grid that changes some images in random at specified intervals using jquery or any other javascript means. Please be noted that I do not need all the images to change at the same time. One group of an image can change in different time interval compared to others.
The images are positioned absolute to the parent div so that it one can fadeIn while the other fades out until it reaches the last stage.
I am completely stuck without any idea on how to achieve this. Could anyone help me with this? Following is my code
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>
You need to create a kind of loop like below and also consider random() to have different timing for the fade function:
$('.column1 img:eq(0)').each(function() {
$(this).hide();
});
setInterval(function() {
$('.column1 img:visible').each(function() {
let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)');
var t = Math.random()*2000;
$(this).delay(t).fadeOut(500);
next.delay(t).fadeIn(500);
});
}, 3000);
#main__slider {
width: 40rem;
height: 25rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1 {
border: 1px solid;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>
I've used slick slider before, but now I don't what causes this ruckus.
Am I missing something? I've followed the instruction at slick slider and also at github, I'm puzzled.
//JS here
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
/* Style here */
.container{
max-width:1200px;
margin:0 auto;
}
<!-- Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- Html -->
<div class="container">
<div class="slider">
<div class="slides">
<img src="Picture4" alt="">
</div>
<div class="slides">
<img src="Picture3" alt="">
</div>
<div class="slides">
<img src="Picture2" alt="">
</div>
<div class="slides">
<img src="Picture1" alt="">
</div>
</div>
</div>
After analyzing your code, I noticed that the slick css import was missing.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css
I leave your example below with the CSS import.
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
.container{
max-width:1200px;
margin:0 auto;
}
.slider{
display:flex;
.slides{
display:flex;
justify-content:center;
}
}
<!-- this line is missing -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
<div class="slider">
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
</div>
</div>