Stretch the image in the first slide Slick Slider

Stretch the image in the first slide Slick Slider - javascript

I have this slick slider and i want to Stretch the image in the first current active slide
i want do this https://prnt.sc/slrcny
for example here example working slider you want to see this example. First current active slide is
Stretch. How i can do it in the slick slider ?
$(document).ready(function() {
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
centerMode: false,
focusOnSelect: true
});
});
.slider-nav div {
width: 200px;
height: 60px;
}
.slider-for {
width: 250px;
height: 250px;
margin
}
.slider-wrap {
positon: absolute;
width: 300px;
height: 300px;
margin-left: 20px;
}
.slick-arrow:before {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<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.6.0/slick-theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<div class="slider-wrap">
<div class="slider-nav">
<div>
<img src="http://placehold.it/50x50"> </img>
</div>
<div>
<img src="http://placehold.it/50x51"> </img>
</div>
<div>
<img src="http://placehold.it/50x52"> </img>
</div>
<div>
<img src="http://placehold.it/50x53"> </img>
</div>
<div>
<img src="http://placehold.it/50x54"> </img>
</div>
</div>
</div

Here's a working snippet for what you want to achieve, in this case the images sizes are 400x600 but since we are using the background-size: cover property the image will be covered in the whole <div class="slide-photo"></div>
$(document).ready(function () {
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
centerMode: false,
focusOnSelect: true,
});
});
.slider-nav {
height: 400px;
}
.slider-nav .slick-list {
width: 100%;
height: 100%;
}
.slider-nav .slick-list .slick-track {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.slider-nav .slick-list .slick-slide {
margin: 0 15px;
position: relative;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.slider-nav .slick-list .slick-slide .slide-photo {
-webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
background-position: bottom;
background-size: cover;
height: 50%;
}
.slider-nav .slick-list .slick-slide .slide-photo::after, .slider-nav .slick-list .slick-slide .slide-photo::before {
bottom: 0;
width: 0%;
height: 4px;
background-color: #ffbf00;
position: absolute;
content: '';
-webkit-transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
transition: 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.slider-nav .slick-list .slick-slide .slide-photo:after {
right: 50%;
}
.slider-nav .slick-list .slick-slide .slide-photo:before {
left: 50%;
}
.slider-nav .slick-list .slick-slide.slick-current .slide-photo {
background-color: #c1c1c1;
background-position: center center;
height: 100%;
}
.slider-nav .slick-list .slick-slide.slick-current .slide-photo:before, .slider-nav .slick-list .slick-slide.slick-current .slide-photo:after {
width: 50%;
}
/*# sourceMappingURL=style.css.map */
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<div class="slider-container">
<div class="slider-nav">
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/one/400/600);"></div>
</div>
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/fdsgds/400/600);"></div>
</div>
<div>
<div class="slide-photo" style="background-image: url(https://picsum.photos/seed/gwegwe/400/600);"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</body>
</html>

Related

css messing up when dynamically appending to swiper js slide

I have an array of elements and i'm trying to chunk the array and dynamically append every element to a swiper js slide. My chunk strategy is to chuck the array every 5 elements and I am looping on the chucked new arrays and appending every element of that array to the swiper slide. And whenever a new chuck array is found a new class called .level3Items will be created that will be housing the 5 .swiper-slide classes. Now my chuck strategy and adding every element to .level3Items works but my CSS messes up when the elements are dynamically added. For debugging I have 2 main divs below. The first one (.level3) is manually coded and it works right. On the second main div (.level3_2) I am adding the same code as the first main div but dynamically and as shows the CSS messes up. How can I fix this? How can I make .level3_2 look like .level3? Thanks in advance.
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
let myArray = ['test1', 'test2', 'test3', 'test4', 'test5']
const result = Object.values(
myArray.map((x, i) => ({
grp: Math.floor(i / 5),
val: x
}))
.reduce((acc, i) => {
acc[i.grp] ||= [];
acc[i.grp].push(i.val);
return acc;
}, {})
);
result.forEach((elm) => {
const dataElem = $('<div class="level3Items"><div class="swiper" id="swiperRegular"><div class="swiper-button-prev"><i class="fa-solid fa-arrow-left"></i></div><div class="swiper-button-next"><i class="fa-solid fa-arrow-right"></i></div><div class="swiper-wrapper">');
elm.forEach(item => {
dataElem.find('.swiper-wrapper').append(`<div class="swiper-slide"><div class="topSwiperSlideItems"><div class="imgCon"><img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" /></div></div><div class="bottomSwiperSlideItems"><div class="textCon"><p>${item}</p></div></div></div>`)
});
$(".level3_2").append(dataElem);
const swiperRegular = new Swiper('#swiperRegular', {
direction: 'horizontal',
slidesPerView: 5,
spaceBetween: 10,
slidesPerGroup: 5,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'disabled_swiper_button'
}
});
})
.disabled_swiper_button {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.level3 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3_2 {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-top: 1%;
background-color: pink;
}
.level3Items {
display: flex;
width: 100%;
height: fit-content;
}
.level3Items #swiperRegular {
width: 100%;
height: 100%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.level3Items .swiper-button-prev {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-prev::after {
display: none;
}
.level3Items .swiper-button-prev i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-button-next {
display: flex;
justify-content: center;
align-items: center;
top: 35%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: blue;
}
.level3Items .swiper-button-next::after {
display: none;
}
.level3Items .swiper-button-next i {
font-size: 1.4vw;
color: #ffffff;
}
.level3Items .swiper-slide {
display: flex;
flex-direction: column;
}
.level3Items .swiper-slide .topSwiperSlideItems {
display: flex;
width: 100%;
height: 20vh;
background-color: gold;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon {
display: grid;
width: 95%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .topSwiperSlideItems .imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
}
.level3Items .swiper-slide .bottomSwiperSlideItems {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
background-color: purple;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon {
display: flex;
width: 95%;
height: fit-content;
margin-left: 5%;
}
.level3Items .swiper-slide .bottomSwiperSlideItems .textCon p {
font-size: 3vw;
color: #bfbfbf;
margin-top: auto;
margin-bottom: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/swiper#8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<!--working-->
<div class="level3">
<div class="level3Items">
<div class="swiper" id="swiperRegular">
<div class="swiper-button-prev">
<i class="fa-solid fa-arrow-left"></i>
</div>
<div class="swiper-button-next">
<i class="fa-solid fa-arrow-right"></i>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="topSwiperSlideItems">
<div class="imgCon">
<img src="https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=%5B660%2C300%5D&w=1500&h=750&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F20%2F2021%2F07%2F23%2Fgrizzly-bear-1.jpg" />
</div>
</div>
<div class="bottomSwiperSlideItems">
<div class="textCon">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--not working-->
<div class="level3_2">
</div>

Custom Transition in vue-awesome-swiper

I have been trying to achieve create a custom transition with a vue-awesome-swiper slider. like This website slider
I already created a slider like this. when I set swiper option to effect: "fade"
But it's not as the same slide effect on that website has. it works so close but with fade-out effect and I don't want that. what I want to do achieve some custom slide effect using SwiperJs
This is my Slider.vue code
<template>
<div class="duel-image-carousel">
<swiper :options="SwiperOptionDuel" ref="mySwiper">
<swiper-slide class="duel-slide">
<div class="swiper-image swiper-img-left">
<img data-swiper-parallax-y="-35%" class="duel-img" src="#/assets/duel-4.jpg" alt />
<div class="white-overlay"></div>
</div>
<div class="swiper-image swiper-img-right">
<img data-swiper-parallax-y="35%" class="duel-img" src="#/assets/duel-3.jpg" alt />
<div class="white-overlay"></div>
</div>
</swiper-slide>
<!-- <swiper-slide class="duel-slide">
<div class="swiper-image swiper-img-left">
<img data-swiper-parallax-y="-35%" class="duel-img" src="#/assets/img/shop-look.jpg" alt />
<div class="white-overlay"></div>
</div>
<div class="swiper-image swiper-img-right">
<img data-swiper-parallax-y="35%" class="duel-img" src="#/assets/img/shop-look2.jpg" alt />
<div class="white-overlay"></div>
</div>
</swiper-slide>-->
<div class="swiper-button-prev prev-btn" slot="button-prev">
<i class="fas fa-long-arrow-alt-left"></i>
</div>
<div class="swiper-button-next next-btn" slot="button-next">
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</swiper>
</div>
</template>
<script lang ='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import {
TimelineMax,
gsap,
Power4,
Expo,
Elastic,
Bounce,
onComplete,
clearProps,
TweenMax
} from 'gsap/all';
#Component({
name: 'DuelImageCarousel',
components: {
swiper,
swiperSlide
}
})
export default class DuelImageCarousel extends Vue {
SwiperOptionDuel: any = {
slidesPerView: 1,
direction: 'horizontal',
loop: true,
grabCursor: true,
speed: 700,
paginationClickable: true,
parallax: true,
autoplay: false,
effect: 'fade',
mousewheelControl: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
};
mounted() {
}
}
</script>
<style lang="scss" scoped>
.duel-image-carousel {
width: 90%;
margin: 0 auto;
overflow: hidden;
margin-bottom: $section-margin;
}
.swiper-image {
width: 50%;
display: inline-block;
position: relative;
height: 80vh;
overflow: hidden;
#include mediaXs {
height: 30vh;
}
#include mediaSm {
height: 40vh;
}
#include mediaMd {
height: 55vh;
}
img {
height: 100%;
object-fit: cover;
width: 100%;
}
.white-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
}
}
.swiper-img-right {
img {
object-position: top center;
}
}
.swiper-button-prev,
.swiper-button-next {
transition: all 0.3s ease-out;
&:hover {
background: #000;
color: #fff;
}
}
.swiper-button-prev {
left: 50%;
width: 50px;
height: 45px;
font-family: 'Font Awesome 5 Free';
content: '\f30b';
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
transform: translateX(-99%);
}
.swiper-button-next {
left: 50%;
width: 50px;
height: 45px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
transform: translateX(0%);
}
</style>
What should i do now to achieve this ? Any idea developers?
Thanks in advance.

How to change image width to fill all of the container, or align it to center?

I am setting up a slick slider and I want the image I use to fill all of the containers, but instead, it fills a portion of it aligned to left, depending on the width of the image. How I can fix it?
or displaying the image in the center...
You can see what I mean here:
https://fantarimo.blogspot.com/2019/05/test-247.html
const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");
$gl2.on("init", (event, slick) => {
$photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
$(".photos-counter span:nth-child(2)").text(slick.slideCount);
});
$gl.slick({
rows: 0,
slidesToShow: 2,
arrows: false,
draggable: false,
useTransform: false,
mobileFirst: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 1023,
settings: {
slidesToShow: 1,
vertical: true
}
}
]
});
$gl2.slick({
rows: 0,
useTransform: false,
prevArrow: ".arrow-left",
nextArrow: ".arrow-right",
fade: true,
asNavFor: $gl
});
function handleCarouselsHeight() {
if (window.matchMedia("(min-width: 1024px)").matches) {
const gl2H = $(".gallery2").height();
$left.css("height", gl2H);
} else {
$left.css("height", "auto");
}
}
$(window).on("load", () => {
handleCarouselsHeight();
setTimeout(() => {
$(".loading").fadeOut();
$("body").addClass("over-visible");
}, 300);
});
$(window).on(
"resize",
_.debounce(() => {
handleCarouselsHeight();
/*You might need this code in your projects*/
//$gl1.slick("resize");
//$gl2.slick("resize");
}, 200)
);
$(".gallery .item").on("click", function() {
const index = $(this).attr("data-slick-index");
$gl2.slick("slickGoTo", index);
});
$gl2.on("afterChange", (event, slick, currentSlide) => {
$photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
button {
background: none;
border: none;
outline: none;
cursor: pointer;
}
body {
font: normal 18px/1.5 monospace;
overflow: hidden;
background: #424242;
}
.over-visible {
overflow: visible;
}
.loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background: white;
}
.container {
max-width: 880px;
padding: 20px 10px;
margin: 0 auto;
}
.synch-carousels {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.synch-carousels > * {
width: 100%;
}
.synch-carousels .right {
order: -1;
}
.synch-carousels .left {
overflow: hidden;
}
.synch-carousels .gallery {
display: none;
}
.synch-carousels .slick-slide {
outline: none;
}
.synch-carousels .slick-vertical .slick-slide {
border: none;
}
.synch-carousels .gallery .slick-list {
height: auto !important;
margin: 0 -20px;
}
.synch-carousels .gallery .slick-slide {
cursor: pointer;
}
.synch-carousels .gallery .slick-slide {
margin: 0 20px;
}
.synch-carousels .nav-arrows {
display: flex;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
.synch-carousels .nav-arrows svg {
fill: white;
}
.synch-carousels .arrow-left {
margin-right: 35px;
}
.synch-carousels .photos-counter {
position: absolute;
top: 10px;
right: 0;
padding: 0 20px;
color: white;
background: #292929;
}
#media screen and (min-width: 480px) {
.synch-carousels .right {
margin-bottom: 20px;
}
.synch-carousels .gallery {
display: block;
}
}
#media screen and (min-width: 1024px) {
.synch-carousels .right {
position: relative;
width: calc(100% - 230px);
margin-bottom: 0;
order: 2;
}
.synch-carousels .left {
width: 210px;
}
.synch-carousels .gallery .slick-slide {
margin: 0 0 20px 0;
}
.synch-carousels .gallery .slick-list {
margin: 0;
}
}
<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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<div class="loading">Carousel is loading...</div>
<div class="container">
<div class="synch-carousels">
<div class="left child">
<div class="gallery">
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="">
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="">
</div>
</div>
</div>
<div class="right child">
<div class="gallery2">
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery1.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery2.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery3.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery4.jpg" alt="" />
</div>
<div class="item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/gallery5.jpg" alt="" />
</div>
</div>
<div class="nav-arrows">
<button class="arrow-left">
<!--SVGs from iconmonstr.com-->
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M2.117 12l7.527 6.235-.644.765-9-7.521 9-7.479.645.764-7.529 6.236h21.884v1h-21.883z"/></svg>
</button>
<button class="arrow-right">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
</button>
</div>
<div class="photos-counter">
<span></span><span></span>
</div>
</div>
</div>
</div>

Change max-width to min-width on the image
img {
min-width: 100%;
height: auto;
}

Hi Did you see there is an outer div as below?
<div class="row" id="content-wrapper">
</div>
In this class, row has given width styles as 90% !important.
So get add the slider section to outer from this div section.
<div class="loading">Carousel is loading...</div>
<div class="container">
<div class="synch-carousels">
----
</div>
</div>
<div class="row" id="content-wrapper">
----
</div>
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Slider that increased center slide width. (Slider plugin suggestions)

I wanted to create slider when it slide center slide width must have incresed and the two slide next to it stay on normal slide.
I have tried one using slick slider.
Here is the code pen link that I have tried.(Click here)
But this is not smooth and the slide next to center slide not showing properly.
If anyone know some better slider for do exact kind of this please suggest me a link.
$('.slider').slick({
slidesToShow: 3,
centerMode: true,
centerPadding: "0px",
speed: 1000
});
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$(slick).next().css({
'margin-left':'auto'
});
});
html,
body {
background: #102131;
}
.slider {
width: 1140px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .2s ease;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
-webkit-transform: translate(-70px, 0px);
transform: translate(-70px, 0px);
width: calc(100% + 140px);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/dark900x12001.jpg" alt="">
</div>
<div class="text">Title1</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/trans900x1200.jpg" alt="">
</div>
<div class="text">Title2</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/mi900x1200.jpg" alt="">
</div>
<div class="text">Title3</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/Venom900x1200.jpg" alt="">
</div>
<div class="text">Title4</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
<div class="slide">
<div class="child-element">
<div class="imgWrap">
<img src="https://www.scopecinemas.com/images/movie/alpha900x1200.jpg" alt="">
</div>
<div class="text">Title5</div>
<div class="desc">Lorem ipsum dolor</div>
</div>
</div>
</div>

Please Try this css for child Element:-
html,
body {
background: #102131;
}
.slider {
width: 1240px;
margin: 20px auto;
text-align: center;
padding: 20px;
color: white;
}
.slider .slide {
padding: 0px;
}
.slider .slide .child-element {
transition: all .5s;
background: #0c1c79;
width: 100%;
height: 800px;
width: 300px;
transform-origin: top center;
margin: 0 auto;
}
.slider .slide .child-element .imgWrap img {
width: 100%;
max-width: 100%;
}
.slider .slide .child-element .desc {
display: none;
}
.slider .slide.slick-active:last-chid .child-element {
margin-left: auto;
}
.slider .slide.slick-center .child-element {
background: rebeccapurple;
transform: scale(1.68);
max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
display: block;
}

Slick slider text on top of images

I'm trying to make a pretty normal carousel, with two arrows on either side in the vertical middle, and text with a button in the middle on top of the image. I cannot get anything to appear on top of the image though, even though the arrows and text are all absolute and have a higher z-index. Here's a codepen with my code. http://codepen.io/kathryncrawford/pen/AXmVAz
And here's my HTML
<div class="slick-slider">
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
<div class="info">
<h1 class="slider-heading">Heading</h1>
<p class="slider-subheading lead">Subheading</p>
<a class="btn btn-large btn-danger" href="">button text</a>
<p class="down-arrow">
<a class="btn btn-large btn-down-arrow" href="#theend">
<i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i>
</a>
</p>
</div>
</div>
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
</div>
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
</div>
</div>
My CSS (the slick css is not included here, but it is in the codepen)
.slick-slider img { /* keep images full screen */
width: 100%;
}
.chevron-container { /* full slider height container for chevrons */
height: 100%;
position: absolute;
width: 100px;
}
.slick-right { /* keeps right arrow to the right */
right: 0;
top: 0;
}
.chevron-container > .fa { /* positions chevrons in vertical center */
bottom: 0;
color: white;
font-size: 10em;
height: 1em;
margin: auto;
position: absolute;
top: 0;
width: 5em;
z-index: 10;
}
.slick-slider .info {
color: white;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 100vh;
text-align: center;
z-index: 10;
}
.slick-slider .info > div {
display: inline-block !important;
vertical-align: middle;
}
And my JS
jQuery(function($){
$('.slick-slider').slick({
accessibility: true,
adaptiveHeight: true,
arrows: true,
infinite: true,
mobileFirst: true,
nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>',
prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>',
slidesToShow: 1
});
});

You have to do
.slick-slide {
/* ... */
position: relative;
}
so that the .info stuff knows it should be absolutely positioned to it's parent.

Just add position: relative to .slide-slide.
jQuery(function($){
$('.slick-slider').slick({
accessibility: true,
adaptiveHeight: true,
arrows: true,
infinite: true,
mobileFirst: true,
nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>',
prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>',
slidesToShow: 1
});
});
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
position: relative;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-slider img { /* keep images full screen */
width: 100%;
}
.chevron-container { /* full slider height container for chevrons */
height: 100%;
position: absolute;
width: 100px;
}
.slick-right { /* keeps right arrow to the right */
right: 0;
top: 0;
}
.chevron-container > .fa { /* positions chevrons in vertical center */
bottom: 0;
color: white;
font-size: 10em;
height: 1em;
margin: auto;
position: absolute;
top: 0;
width: 5em;
z-index: 10;
}
.slick-slider .info {
color: white;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 100vh;
text-align: center;
z-index: 10;
}
.slick-slider .info > div {
display: inline-block !important;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="slick-slider">
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
<div class="info">
<h1 class="slider-heading">Heading</h1>
<p class="slider-subheading lead">Subheading</p>
<a class="btn btn-large btn-danger" href="">button text</a>
<p class="down-arrow">
<a class="btn btn-large btn-down-arrow" href="#theend">
<i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i>
</a>
</p>
</div>
</div>
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
</div>
<div>
<img class="img-fluid" src="http://www.placecage.com/1500/750" alt="">
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Stretch the image in the first slide Slick Slider - javascript

Related

css messing up when dynamically appending to swiper js slide

Custom Transition in vue-awesome-swiper

How to change image width to fill all of the container, or align it to center?

Slider that increased center slide width. (Slider plugin suggestions)

Slick slider text on top of images

Categories

Resources