Carousel with zooming of current slide - javascript

I used the Slick.js to make a carousel just like on a picture, but I failed (
Does anybody knows any way to make a carousel just like on a picture? There should be a different width of slides, animation, and a current slide must have a bigger size
What I need to do:
What I have now - https://jsfiddle.net/fiter92/xL5qezxy/
jQuery(document).ready(function($){
$('.carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
arrows: false,
centerMode: true,
centerPadding: '60px',
variableWidth: true
});
$('.carousel-nav').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: true,
appendArrows: '.carousel-arrows',
prevArrow: '<span class="carousel-prev"><-</span>',
nextArrow: '<span class="carousel-next">-></span>',
asNavFor: '.carousel',
});
});
.slick-slide {
padding: 20px;
}
.slick-current img {
width: 120%;
max-width: none;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=1" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=2" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=3" alt="">
</div>
<div>
<img src="http://dummyimage.com/800x400/000/fff&text=4" alt="">
</div>
<div>
<img src="http://dummyimage.com/400x400/000/fff&text=5" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=6" alt="">
</div>
</div>
<div class="carousel-nav">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
<div class="carousel-arrows">
</div>


Since you are using center mode you can add a transform of scale to the slide that gets the class slick-center. Then to animate the scale effect, you can add a transition to the slick-slide class.
.carousel .slick-slide {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.carousel .slick-center {
-webkit-transform: scale(1.8);
transform: scale(1.8);
}

Related

JS Slider with Stacked Slider for Navigation

I'm looking to build out a slider that auto cycles through individual slides, but also has a navigation that is stacked, and also a slider.
Like this:
The main issues I am running into are having that synced slider only show 1 "active" slide, and the navigation being stacked, and in it's own slider. As it auto plays through to "7" the slider on the bottom should slide over to show that one is active.
This is the closest I could hack together:
My code:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed: 9000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true,
asNavFor: '.slider-for'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click", function(e) {
if (!killit) {
e.stopPropagation();
var idx = $(this).data("thumb");
$parent.slick("goTo", idx - 1);
}
});
$nav.on("beforeChange", function() {
killit = true;
}).on("afterChange", function() {
killit = false;
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.slider .action {
display: block;
margin: 100px auto;
width: 100%;
text-align: center;
}
.slider .action a {
display: inline-block;
padding: 5px 10px;
background: #f30;
color: #fff;
text-decoration: none;
}
.slider .action a:hover {
background: #000;
}
.slick-active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
<div>
<h3>11</h3>
</div>
<div>
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
</div>
View on jsFiddle

The asNavFor property works perfectly if both sliders have the same row property. But because you want the second slider to have three rows you have to use an own sync-function.
First you have to prepare the children of .slider-for: Give them data-thumb attributes like the children of .slider-nav have.
After that you can get the index of the shown slide of .slider-for with that data-thumb attribute
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
and calculate with it the slide index for .slider-nav. Here you have to subtract 1 from for_index because it starts with 1 instead of 0 (like an index would do).
let nav_index = Math.floor((for_index - 1) / 3);
Then you goTo that index.
$('.slider-nav').slick('goTo', nav_index);
To get it to work you have to wrap all that in an event listener (and its handler). I used the setPosition event for that because it styles the current slide on init.
Working example: (simplified for demonstration)
I changed the red border to a brighter background because the border messed up the slider, even with box-sizing: border-box (the last slide was moved to a second, hidden row and therefor not visible).
I also removed autoplaySpeed and speed for .slider-nav because autoplay and fade are set to false.
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
speed: 700,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false
});
$('.slider-nav').slick({
autoplay: false,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true
});
$('.slider-for').on('setPosition', function() {
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
let nav_index = Math.floor((for_index - 1) / 3);
$('.slider-nav').slick('goTo', nav_index);
$('.slider-nav .slick-slide').css('background-color', 'transparent');
$('.slider-nav .slick-slide[data-slick-index="' + nav_index + '"]').css('background-color', '#aaa');
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
text-align: center;
transition-delay: 0s;
}
.slider .slick-dots li button::before {
font-size: 15px;
color: white;
}
.slider .slick-dots li.slick-active button::before {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>

Slick Carousel next and previous buttons showing above/below, rather than left/right

I'm using Slick Carousel this and my "next" and "previous" arrows are appearing above and below my images, rather than on each side. I'm just looking for it to appear the way it does in the Slick docs.
The buttons aren't in the html, they're generated by the slick js.
Here's the html:
<div class="albumsCarousel">
<div><img class="slickImage" src=./images/betterQuit.png></div>
<div><img class="slickImage" src=./images/betterVill.png></div>
<div><img class="slickImage" src=./images/casio.jpg></div>
<div><img class="slickImage" src=./images/betterWorried.png></div>
<div><img class="slickImage" src=./images/betterFrost.png></div>
<div><img class="slickImage" src=./images/betterWeird.png></div>
<div><img class="slickImage" src=./images/betterOphelia.png></div>
<div><img class="slickImage" src=./images/betterEnya.png></div>
<div><img class="slickImage" src=./images/betterXiu.png></div>
<div><img class="slickImage" src=./images/betterImpasse.png></div>
<div><img class="slickImage" src=./images/betterV.png></div>
<div><img class="slickImage" src=./images/betterThrone.png></div>
<div><img class="slickImage" src=./images/betterSholi.png></div>
<div><img class="slickImage" src=./images/betterPGirls2.png></div>
</div>
here's the JS:
$(document).ready(function(){
$('.albumsCarousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
nextArrow: '<i class="fa fa-arrow-right"></i>',
prevArrow: '<i class="fa fa-arrow-left"></i>'
});
and here's the CSS (which I'm pretty sure isn't playing a role here):
.slick-prev, .slick-next {
transform: translate3d(0, 0, 0);/* fix for chrome not rendering */
}
.slick-dots {
transform: translate3d(0, 0, 0);
}

I had a similar problem with slick; the navigations where above and under the image. but i solved it with this simple css.
.nextArrowBtn{
position: absolute;
z-index: 1000;
top: 50%;
right: 0;
color: #BFAFB2;
}
.prevArrowBtn{
position: absolute;
z-index: 1000;
top: 50%;
left: 0;
color: #BFAFB2;
}
Now in your slick configuration, add the classes above to the prevArrow and nextArrow attributes.
$("#slick-images").slick({
nextArrow: '<i class="icon fa-arrow-right nextArrowBtn"></i>',
prevArrow: '<i class="icon fa-arrow-left prevArrowBtn"></i>'
});
you can add other attributes as desired, optionally, you can also style the arrow to choice. but this little css positions the arrow right where you in the middle of the images. I hope this helps someone out there. Cheers!

can you please remove next and previous arrow from option and try it. you can check here the working code also.
<div class='container'>
<div class='single-item'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
css
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
js
$(".single-item").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
});
Working code check here
https://jsfiddle.net/v8xbo5sz/
Try this if its work
$(".single-item").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
});

Slick Slider Carousel with text

I've created a simple image carousel with arrows using Slick Slider. But I want a different h2 to be shown on top each image that slides across, like on this website.
$(document).ready(function() {
$('.top_slider').slick({
dots: false,
infinite: true,
// centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
// centerPadding: '220px',
arrows: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>'
});
});
h2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
font-size: 46px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
text-transform: uppercase;
}
<section class="top_slider">
<div>
<img src="images/image1.jpg">
<h2>text 1</h2>
</div>
<div>
<img src="images/image2.jpg">
<h2>text 2</h2>
</div>
<div>
<img src="images/image3.jpg">
<h2>text 3</h2>
</div>
</section>
At the moment that code just puts both h2's on top of each other on the first image.

The Issue you are having is due to your CSS, you are setting an absolute position for the h2 tags, but you are not setting their parents to have a relative position.
simply add a class "slide" with this style:
.slide {
position: relative;
}
and assign that class to all your slides like this:
<div class="slide">
<img src="https://unsplash.it/400/250">
<h2>text 1</h2>
</div>
<div class="slide">
<img src="http://placehold.it/400x250">
<h2>text 2</h2>
</div>
You can see a working example here.

Slick carousel pop up - use iframes instead of links (a)

I've created a slick carousel that when someone clicks a slide, it pops up (the whole carousel and its functionality).
The problem is that, at the moment, the pop up carousel is made up of images and I need it to have videos (iframes). Do you know how can I change it to have iframes instead of links (a href)?
This is my code :
HTML:
<section class="center slider">
<div class="single">
<a href="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=1">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=2">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=3">
</a>
</div>
<div class="single">
<a href="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=4">
</a>
</div>
</section>
CSS:
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
opacity: 0.5;
}
.slick-current {
opacity: 1;
}
JS:
$(document).on('ready', function() {
$('.center').slick ({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true
});
$('.center').slickLightbox({
slick: {
itemSelector: 'a',
navigateByKeyboard: true,
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
mobileFirst: true
}
});
});
External links:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css">

Slick Slider Center Mode doesnt work

I use the Center Mode from the Slick Slider. Now i have the problem that i want the slider in full width and that the centered Image is much larger than the slides. I added a image from the template:
Slider Template
My site ist hosted on: http://be-virtual.org/schnittchen/
My Code is the following
Javascript:
$(document).on('ready', function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slider button {
background: #000;
}
.slider button:hover button:active button:visited {
background: #000;
}
.slide-h3{
margin: 10% 0 10% 0;
padding: 40% 20%;
background: #008ed6;
}
.slider div{
margin-right: 5px;
}
.slick-slide{
opacity: .6;
}
.slick-center{
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
}
<section class="center slider">
<div>
<img src="http://placehold.it/350x300?text=1">
</div>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
Sorry iam new at the coding and new in this community. Please have some
patience and indulgence.

upgrade your slick min js file use latest version
http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js

Well for starters your jquery setup is wrong. It should begin with $(document).ready(function(){ and not $(document).on('ready', function() {. In your CSS it looks like you have set a width to the slideshow but not to the images themselves, is that correct? In that case, try setting the images to the same fixed width as your slideshow.

Categories

Resources