I am using slick slider js to make a two rows with an expanding grid. I started with an example I found on w3 schools but I can't get the box to expand to the whole container and if I can by changing the length of the width (i.e. 1000px) it shows up behind the icons. I am trying to get the icons to go down when I click an icon and the box opens but I am sure at this point on how to do it.
HTML:
<div class="expanding-grid">
<div class="container container-sm">
<div class="carousel">
<div class="links">
<li>
<a><img src="/icons/Acting.png" style="width: 200px; text-align:center;" onclick="openTab('b1');">
<p style="text-align:center; margin-top:5px">Acting</p></a>
</li>
<div id="b1" class="containerTab" >
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<!-- other icons -->
</div>
</div>
</div>
CSS
.containerTab {
padding: 20px;
color: white;
background-color: grey;
}
.containerTab p {
width: 100%;
}
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
expanding box JS:
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
slick slider JS
$(document).ready(function(){
$('.carousel').slick({
rows: 2,
slidesToShow: 5,
slidesToScroll: 3,
mobileFirst:true,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 1040,
settings: {
slidesToShow: 5,
slidesToScroll: 3,
infinite: true,
dots: true,
}
}, {
breakpoint: 1020,
settings: {
slidesToShow: 4,
slidesToScroll: 3,
infinite: true,
dots: true
}
}, {
breakpoint: 600,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 3,
}
}]
});
});
This is how it looks without styling
and if I change the width length in the containerTab
Related
This question was migrated from Webmasters Stack Exchange because it can be answered on Stack Overflow.
Migrated 22 hours ago.
I'm trying to create a gallery slider using slick slider js library. A basic mobile responsive gallery carousel with a progress bar. Everything is running however I'm having trouble with some styling. I want the effect of the gallery center image to be raised above the other 2 (half) slides in the background. For some reason- I can't achieve the center padding effect and the slides are jumping a little when its on autoplay. The widths are also messed up responsively. Im not sure why none of my styles are working correctly. I attached my html code(without the actual image links) and how I initialized it in my js. I also attached some css that I had implemented (I had originally fully styled it- but I took out the styles because it really got messy).
Any advice how to proceed will be greatly appreciated
//Initialize slick slider
$(document).ready(function() {
$(".coverflow").slick({
dots: false,
arrows: true,
infinite: true,
centerMode: true,
centerPadding: '150px',
variableWidth: true,
focusOnSelect: true,
speed: 1000,
autoplay: true,
autoplaySpeed: 2500,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}, ],
});
});
//add slick-center class to create the carousel effect
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).addClass('slick-center');
})
//add the slick container class
;
$(document).ready('.coverflow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.slick-center .slide-container').removeClass('slick-center');
$('.slick-slide').eq(nextSlide).find('.slide-container').addClass('slick-center');
});
//progress bar for slick slider
$(document).ready(function() {
var $slider = $('.coverflow');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
});
.progress {
max-width: 800px!important;
margin-right: auto;
margin-left: auto;
display: block;
width: 75%;
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #5B5B5B;
background-image: linear-gradient(to right, #FA5927, #FA5927);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
margin-top: 55px;
}
.slide-number {
color: #FA5927;
font-family: 'PT SANS';
font-size: var(--wp--preset--font-size--medium)!important;
padding: 10px;
}
.slide-container {
margin-right: 50px;
margin-left: 50px;
}
#media only screen and (max-width:880px) {
/*--gallery slider--*/
.coverflow img {
width: 70%;
margin: auto;
}
}
#media only screen and (max-width:787px) {
/*--gallery slider--*/
.coverflow img {
width: 50%;
margin: auto;
}
}
#media only screen and (max-width:414px) {
/*--gallery slider--*/
.coverflow img {
width: 35%;
margin: auto;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="slider">
<section class="coverflow">
<div class="slide-container">
<span class="slide-number">01</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">02</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">03</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">04</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">05</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
<div class="slide-container">
<span class="slide-number">06</span>
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp">
</div>
</section>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</span>
</div>
<!-- end content -->
</div>
Made a slider "Swiper". To the right of it is the tag "h1", the text of which needs to be changed depending on what the current picture is.
If you press the right button, then the indexes are 2, 3, 4, and if the left one is 0, 1, 2.
It is unclear why this is happening.
I tried to use the "document.getElementsByClassName("left-element")" class for searching, but it doesn't work that way.
Works only with "document.getElementById("box")".
Also, at initial loading, the picture tries to be drawn at 100% in width, but then collapses to the 50% I need. How to remove this effect?
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
init: function () {
},
},
});
swiper.on('slideChange', function () {
let name = swiper.activeIndex;
/*
let element = document.getElementsByClassName("left-element");
alert(name);
*/
let element = document.getElementById("box");
element.innerHTML = (name) + " " + "Index";
});
.main {
position: fixed;
padding: 16px;
margin-top:40px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<div class="main">
<h1 class="left-element" id="box">Empty index</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201309/119067.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201408/148243.jpg">
</div>
<div class="swiper-slide">
<img src="https://www.fonstola.ru/large/201111/50599.jpg">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
I've removed some of your effect on the Swiper, but feel free to add it back (cause I tried to set up the default Swiper again on the Swiper Docs :D ).
And remember to change the <div class="swiper-container"> to <div class="swiper">
Here's the code in Javascript:
const swiper = new Swiper(".swiper-container", {
// Install modules,
direction: 'horizontal',
initialSlide: 0,
loop: true,
speed: 500,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// ...
});
swiper.on('slideChange', () => {
let swiperIndex = swiper.realIndex
console.log('Swiper index right now: ', swiperIndex)
let element = document.getElementById("box")
element.innerHTML = (swiperIndex) + " " + "Index";
})
Whenever the slide change, it'll assign the realIndex to swiperIndex
Here's the fiddle for you to have a clearer look: Fiddle
To create a standard e-commerce slideshow template I would like to have two sliders with two asNavFor parameters values for slider to slider.
Link to codepen.io
As Code:
<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>
<div class="slider-nav">
<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>
</div>
With CSS:
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;
}
and JS:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: true,
dots: false,
respondTo:'min',
asNavFor: '.slider-nav',
cssEase:'linear'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 4,
rows: 2,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: false,
dots: false,
respondTo:'min',
asNavFor: '.slider-for',
cssEase:'linear'
});
And slider with one row change slide in slider with two rows but when you click for any slide in slider with two rows you won't get the slide number you clicked on.
Works as wanted when $('.slider-nav') there is only one row, you can change rows: 2 to rows: 1 to $('.slider-nav').
How to get the same slide for $('.slider-for') when you click on it in $('.slider-nav')?
I think this is a common issue with Slick Slider: https://github.com/kenwheeler/slick/issues/1206
I was looking to do the same thing and I think I found a solution with some help from that github link
https://jsfiddle.net/sn3b5pcu/
$('.slider-for').slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: true,
dots: false,
respondTo:'min',
asNavFor: '.slider-nav',
cssEase:'linear'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 4,
rows: 2,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover:false,
arrows: false,
dots: false,
respondTo:'min',
asNavFor: '.slider-for',
cssEase:'linear'
});
$('.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;
});
I have multiple Slick Sliders on one page. Each slider has a thumbnail Nav. The problem is the sliders uses the previous ones current position rather than starting on the first thumbnail.
I'm guessing I need a way to dynamically add an id so they don't affect each other. (My JS knowledge is very basic)
$('.slider-products').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
var windowWidth = $(window).width();
if(windowWidth <= 800) {
$('.slider-nav').slick({
vertical: false,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-products',
arrow: false,
focusOnSelect: true
});
}
else {
$('.slider-nav').slick({
vertical: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-products',
focusOnSelect: true
});
}
Use the .each method to bypass all the sliders.
Add a numbered class for each pair of sliders by the .addClass method.
Use the responsive option to change the settings depending on the width of the screen.
Please check the result: https://codepen.io/glebkema/pen/bWRZzB
var numSlick = 0;
$('.slider-products').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrows: false,
asNavFor: '.slider-nav.slider-' + numSlick,
fade: true,
slidesToScroll: 1,
slidesToShow: 1,
});
});
numSlick = 0;
$('.slider-nav').each( function() {
numSlick++;
$(this).addClass( 'slider-' + numSlick ).slick({
arrow: false,
asNavFor: '.slider-products.slider-' + numSlick,
focusOnSelect: true,
slidesToScroll: 1,
slidesToShow: 4,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 3,
}
}
]
});
});
.slick-arrow {
display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
background: #c69;
border: 2px solid #fff;
color: #fff;
font-size: 36px;
font-weight: bold;
outline: none; /* prevent the appearance of a tiny gray contour */
padding: 18px 0;
text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
cursor: pointer;
opacity: .7;
}
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-products">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
I'm using slides.js in a website, and the page so far is supposed to look like this:
But about 1/4 times the page loads, it instead looks like this:
Or this:
Here's my jQuery:
$(document).ready(function() {
$('#slides').slidesjs({
width: 860,
height: 250,
pagination: false,
generatePagination: false,
navigation: {
active: false
},
play: {
active: false,
effect: "fade",
interval: 7000,
auto: true,
pauseOnHover: false
},
effect: {
fade: {
speed: 2000
}
}
});
});
And the HTML is just the slides.js standard:
<style>
#slides {
display: none;
}
.container {
margin: 0 auto;
width: 860px;
}
</style>
<div class="container">
<div id="slides">
<img />
</div>
</div>
This is unfathomable annoying. It would be nice if this problem would at least be consistent.