I'm using the Slick Carousel (slick.js) but am having trouble horizontally centering the carousel on the page.
HTML:
<!-- logo slider -->
<section id="customer-carousel" class="slider responsive container m-5">
<div>
<img src="/images/customers/eth_zuerich_logo.png" class="customer-slide">
</div>
<div class="text-center">
<img src="/images/customers/kbsi_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/max-planck-institute-goettingen.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/nc_state_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/osaka_university_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/phoenixnmr_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ruhr_universitaet_bochum_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/synex_medical_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/technical_university_of_brno_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_ilmenau_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/tu_kaiserslautern_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/ucsb_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/UMD_logo.png" class="customer-slide">
</div>
<div>
<img src="/images/customers/unh-logo.png" class="customer-slide">
</div>
</section>
<!-- /logo slider -->
CSS:
#customer-carousel {
width: 100%!important;
}
.customer-slide {
width: 8rem;
max-height: 10rem;
margin-left: auto;
margin-right: auto;
}
JS:
(function ($) {
'use strict';
// Preloader js
$(window).on('load', function () {
$('.preloader').fadeOut(100);
});
// Accordions
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.ti-angle-right').removeClass('ti-angle-right').addClass('ti-angle-down');
}).on('hidden.bs.collapse', function () {
$(this).parent().find('.ti-angle-down').removeClass('ti-angle-down').addClass('ti-angle-right');
});
//slider
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
dots: true,
arrows: false
});
})(jQuery);
The page is staged here & the carousel is right on the home page (customer logos):
http://bridge12-staging.s3-website.us-east-2.amazonaws.com/
Really appreciate your help!
Thanks!
Mike
There is a class "m-5" on the slider that's setting the margins to 3rem!important. Removing that class seems to fix the horizontal centering. If that class is needed, you could override the margins in your CSS by ID:
#customer-carousel {
margin-left: auto!important;
margin-right: auto!important;
}
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>
I'm working with Slick carousel in JavaScript
http://kenwheeler.github.io/slick/
I want to show 2 slides plus part of the 3rd slide on the carousel, like in the picture below.
How do I achieve this effect?
Here is a Codepen of Slick in action
https://codepen.io/paveldominguez/pen/ElLfb
<section id="features" class="blue">
<div class="content">
<h2>Responsive Display</h2>
<div class="slider responsive">
<div>
<h3>1</h3>
</div>
<div>
<div>
<iframe width="100%" src="//www.youtube.com/embed/ubGpDoyJvmI" frameborder="0" allowfullscreen></iframe>
</div>
</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>
</div>
</section>
i think this is a good example, it could help you. https://codepen.io/ehsantl/pen/QKGroV
with this css:
.slider {
max-width: 1400px;
margin: 0 auto;
background: red;
}
js:
var settings = {
dots: false,
arrows: false,
slide: '.slick-slideshow__slide',
slidesToShow: 2.5,
infinite: false,
centerMode: true,
centerPadding: '60px',
};
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.
I need to be able to hide the previous button when on the first slide or the next button when on the last slide of the Slick Scoller Carousel.
However I cannot seem to find a way to do this with custom buttons.
Code currently:
<div class="myscroller">
<div class="item"
<p>SLIDE 1</p>
</div>
<div class="item"
<p>SLIDE 2</p>
</div>
<div class="item"
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>
<script type="text/javascript">
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: false
});
});
function myPrev(){
$('.myscroller').slick('slickPrev');
}
function myNext(){
$('.myscroller').slick('slickNext');
}
</script>
I've tried using some css styling but to no avail. One post claimed to use this in the css, but it didnt work:
<style>
.slick-arrow[aria-disabled="true"]{
opacity: 0;
}
</style>
Any suggestions would be appriciated.
You can achieve this by using some js code ,
assign a click listner on button then check wether ist's in the first or last slide ( .first / last ().hasClass("slick-current");), to enable or disable buttton
See below snippet :
$(function() {
$('.myscroller').slick({
infinite: false,
arrows: false
});
$("#left").hide()
$(".slick-arrow").on("click", function() {
var isFirst = $(".slick-slide").first().hasClass("slick-current");
var isLast = $(".slick-slide").last().hasClass("slick-current");
isFirst ? $("#left").hide() : $("#left").show();
isLast ? $("#right").hide() : $("#right").show();
});
});
function myPrev() {
$('.myscroller').slick('slickPrev');
}
function myNext() {
$('.myscroller').slick('slickNext');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>
Try this
$(document).ready(function(){
$('.myscroller').slick({
infinite: false,
arrows: true,
prevArrow:'<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>',
nextArrow:'<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>',
});
});
.myscroller
{
position: relative;
padding-bottom: 50px;
}
.slick-arrow
{
position: absolute;
bottom: 0;
}
#left.slick-arrow
{
left: 0;
}
#right.slick-arrow
{
right: 0;
}
.slick-arrow.slick-disabled
{
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
<div class="myscroller">
<div class="item">
<p>SLIDE 1</p>
</div>
<div class="item">
<p>SLIDE 2</p>
</div>
<div class="item">
<p>SLIDE 3</p>
</div>
</div>
I have the following OWL Carousel 2 initialization code:
$(document).ready(function(){
moment.locale('nl-NL');
$("#owl-slider").owlCarousel({
items: 1,
responsive: false,
nav : false,
loop: false,
dots: true,
dotsEach: 1,
autoplaySpeed : 300,
dotsSpeed : 400,
autoPlay: true,
navRewind: true,
animateOut: 'fadeOut'
});
});
This results in the following html of the carousel:
<div class="item-list" id="newsblock">
<div id="owl-slider" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;">
<div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark">Nieuwsbericht</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div><div class="owl-item" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark">Nog meer nieuws</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
<div class="owl-item active" style="width: 467px; margin-right: 0px;">
<div class="item">
<img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#">
<div class="header">
<h2 class="title">
<a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark">Test</a>
</h2>
<div class="time">17 November</div>
</div>
</div>
</div>
</div>
</div><div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot active"><span></span></div>
</div>
</div>
</div>
</div>
The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.
Please provide some guidance on what could be the solution!
Kind Regards.
I solved my problem by adding this code to css:
.owl-item {
float: left;
}
.owl-carousel {
overflow: hidden;
}
Add singleItem:true to your javascript.
This will make it display only a single image at a time.
The width of the owl stage div will always extend past the parent carousel container (div id="owl-slider" class="owl-carousel owl-theme") if there is more than one item in the carousel. This is easily fixed by setting overflow to hidden in your CSS.
.owl-carousel {
overflow: hidden;
}