We Keep Coding

SplideJS full-width images slider not autoplaying

I'm using Splide as a full-width slider on a page with images taken from a loop of my database:
<div class="splide b-bottom-accent is-hidden-mobile">
<div class="splide__track">
<ul class="splide__list">
#foreach($slider_images as $image)
<div class="splide__slide"><img src="{{ asset('storage/'.$image->path) }}"></div>
#endforeach
</ul>
</div>
</div>
my javascript to trigger the slider:
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
} ).mount();
The cover option makes it so the images become background of the div and can be cover, the perPage, gap and padding options are there to make the fade work.
The documentation doesn't say how to activate autoplay, I think it implies is automatically activated, instead, it says how to add a progressbar only :
You can add a progress bar or play/pause buttons for autoplay by writing a few extra lines of HTML.
Am I missing something? Everything works, the slider shows, the images show, the fade happens when clicking the arrows, I have no errors in my console. Any idea?

You just need to add autoplay: true, and an interval is also configurable (ms). I found setting the type to fade it was best to have rewind set to true too.
new Splide( '.splide', {
type : 'fade',
perPage: 1,
gap: 0,
padding: 0,
rewind: false,
width : '100vw',
height: 390,
cover: true,
autoplay: true,
interval: 4000
} ).mount();

Helping with Gucci like owl-carousel

Ive tried as much as I could on creating an owl carousel for a fashion website, I want a similar one that gucci.com has. Image below. I have updated my website and code and looks like this now: ghostparis.com[looks like this now: ghostparis.com] . Okay so progress so far the images are now loading and in a carousel, not playing automatically sadly and critically loading vertically and not horizontally, like if you visit the website in mobile device you will see that the image loads downwards and not sideways like the next image. I dont know how to fix it :( 1
I have tried creating this in code (HTML)
<div class="site-blocks-cover" data-aos="fade">
<div class="backgroundHome">
<div class="slider_area">
<div class="slider_active owl-carousel owl-theme">
<div class="homeslider">
<div class="item">
<div class="image1">
<img src="images/Ghost1.jpg" alt="">
</div>
<div class="image2">
<img src="images/Ghost2.jpg" alt="">
</div>
<div class="image3">
<img src="images/Ghost3.jpg" alt="">
</div>
</div>
</div>
css here:
.backgroundHome{
width: 100%;
height: 100%;
}
.item img{
display: block;
width: 100%;
height: auto;
}
background color red is just for development purposes as its just overriden by image on slider
and javascript I think here is pretty much where my mistake is as its my first time actually creating a slider:
var slider1 = function(){
$('.slider_active').owlCarousel({
loop:true,
margin:0,
items:1,
autoplay:true,
navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
nav:true,
dots:true,
autoplayHoverPause: true,
autoplaySpeed: 800,
responsive:{
0:{
items:1,
dots:false,
},
767:{
items:1,
dots:false,
},
992:{
items:1,
dots:true,
}
}
})
};
slider1();
Help with be really much appreciated.

Change width of slide in Slick-Slider

I am using slick-slider
in my Angular-6 project using jQuery. I want to change the width of the slide on click of that slide.
Here is my HTML:
<div class="slide-container">
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
</div>
Here is my typescript code:
ngAfterViewInit() {
$('.slide-container').slick({
centerMode: true,
centerPadding: '25%',
slidesToShow: 1,
accessibility: true,
cssEase: 'ease-in-out',
focusOnSelect: true,
infinite: false,
speed: 350,
});
}
changeWidth() {
// currentWidth is a global variable assigned to '25%'
if (currentWidth === '25%') {
$('.slide-container').slick('slickSetOption', 'centerPadding', '2%');
} else {
$('.slide-container').slick('slickSetOption', 'centerPadding', '25%');
}
}
Here is my CSS:
.slide {
transition: width 0.35s ease-in-out;
}
It works pretty well but the problem is when it increases the width slides move towards left first and then start its CSS transition. Also, when it decreases the width it moves slides towards the right and then starts the CSS transition.
At the time of increasing width, I want it to increase the width from the center of the slide and at the time of decreasing it should end up decreasing in center of slide only.
It is also okay to change CSS properties of Slick-classes. I tried to change according to my need but it is not working as my expectation.
How can I accomplish this scenario?
Thanks.

Slick slider not being responsive when resizing the window

I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should.
https://codepen.io/Reece_Dev/pen/xLQwEb
$('.carousel').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 1,
});
#container{
width: 100%;
}
.slick-slide img{
width: 80%;
height: auto;
max-width: 2000px;
}
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
</div>
</div>

codepen look for the window resize event an add this
$(window).resize(function(){
$('.my-slider')[0].slick.refresh();
});

Answer from slick creator, Ken Wheeler, himself:
$('.slider-class').slick('setPosition');
https://stackoverflow.com/a/32107099/3396866

Run the slick method on window resize to recalculate the image dimensions.
$(window).on('resize orientationchange', function() {
$('.carousel').slick('resize');
});

Turns out that all I needed was some css styles and to add the latest jQuery to wordpress. Check my codepen to see the css if you're have the same problem

Here's the code I use to resize my slack carousel, whenever the browser window changes height.
var MARGIN_TOP_BOTTOM = 15;
$(window).on('init resize', function () {
var newWindowHeight = $(this).height();
newWindowHeight -= (MARGIN_TOP_BOTTOM * 2);
$(".cssCarousel").css("margin", MARGIN_TOP_BOTTOM + "px 0px");
$(".slick-slide").css("height", newWindowHeight + "px");
$(".slick-slide img").css("height", newWindowHeight + "px");
});
As you can see, I leave a small (15px) gap at the top & bottom.

Change adjust the height in bxSlider

I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.
I found in the code line that makes this adjustment:
slider.viewport.css('height', getViewportHeight());
and here, set the viewport height
slider.viewport.height(getViewportHeight());
accurate results in css percentage because used responsive layout
thanks.

When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.
I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.
I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.
All of these features are options and as they are options that makes them optional...optionally.
There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.
Fiddle
Snippet
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
adaptiveHeight: true,
adaptiveHeightSpeed: 750,
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
});
/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
event.stopPropagation();
var tgt = document.querySelector('.bx-viewport');
//tgt.removeProperty('height');
//tgt.removeAttribute('height');
//tgt.setAttribute('height', '100%');
}, false);
*/
img {
display: block;
margin: 0 auto
}
/*
.bx-viewport {
height:90vh !important;
}
*/
/*
.bx-controls a {
top:.05% !important;
}
*/
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
</div>
<div>
<img src="http://placehold.it/350x666?text=350x666.png" id="image2">
</div>
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
</div>
<div>
<img src="http://placehold.it/350x350?text=350x350.png" id="image4">
</div>
</div>