We Keep Coding

How to create a carousel in HTML with previous/next images visible on left/right sides?

I'm wondering how to create a slider with images, so that previous and next ones are visible on the left/right edges, while active one is always centered.
I can show previous or next slides using margin-left/margin-right with negative values, but when I scroll to the next one, it won't be centered because of this margin.
Should I apply and remove negative margins with js script? How to do so?
I show my idea with two simple screenshots that show what happens scrolling to the right, from 1st slide to 2nd one:

$('.slider').slick({
dots: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
centerMode: true,
dots: false,
focusOnSelect: true,
});
$('.slider').slick('slickGoTo', 1);
.slider {
max-width: 450px;
}
.slider .slick-slide {
padding: 20px;
outline: none;
}
.slider .slick-slide .inner {
border: 2px solid #000;
min-height: 550px;
padding: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<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.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<div class="slider">
<div>
<div class="inner">
SLIDE 1
</div>
</div>
<div>
<div class="inner">
SLIDE 2
</div>
</div>
<div>
<div class="inner">
SLIDE 3
</div>
</div>
</div>

First hide the horizontal overflow on the parent container.
Then I guess you could do something like this
<div class="container-item" style="--i: 0"></div>
<div class="container-item" style="--i: 1"></div>
<div class="container-item" style="--i: 2"></div>
.container-item{
--active: 0
transform: translateX(calc((var(--i) - var(--active))* width ))
}
//width refers to the width of the current element which has to be set by you or you may use javascript to find that
and use Javascript to change the value of --active when the carousel arrows are clicked.
The syntax that I used within the calc function might not be valid so you'll have to tweak that around a bit.

Select a Slick slider 1.3.5 after page load so it has focus to navigate with arrow keys

I want the slider to be selected automatically after the loading of page. Meaning that I want to be able to navigate through the slider using the arrow keys right after the page load, without clicking on it first.
This is the workign slider but I have to click on it first before the arrow keys work.
https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
JS
$(".top_slider").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});

1. Put focus on the slider after it is loaded
After the slider is initialised, you can put focus on the slider so that the keyboard can be used without tabbing to it or clicking on it first... but note that you can only set focus on an element that can get focus e.g. an a, button or input. You're first slide contains a link so we can use it.
In Slick 1.3.9 or below (which you are using), you can use the onInit callback and select the link in the first div of the .slide-track like this:
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
In Slick 1.4.0 and above, you use the callback event before you initialise the slider, and you can select the first slide more easily using the .slick-current class (note, you still need to select a focus-able element in the slide):
/* Bind the event BEFORE initialising slick */
$('.top_slider').on('init', function(event, slick){
$(".top_slider .slick-current a").focus();
});
/* Now you can initialise Slick */
$(".top_slider").slick({
/*Settings....*/
});
2. Automatically scroll to the slider when the page loads
You just need the following line to make your page to scroll down to the slider when the page loads:
$( document ).ready(function() {
$("html, body").animate({ scrollTop: $('.top_slider').offset().top}, 500);
});
We get the position of the top of the slider using the .top_slider class and set scrollTop to this value in the animate function - this will animate the scroll to that location.
Working Snippet Putting this all together:
$('.top_slider').on('init', function(event, slick) {
$(".top_slider .slick-current a").focus();
});
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
$('html,body').animate({ scrollTop: $('.top_slider' ).offset().top}, 500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h1>HEADER HERE...</h1>
<h2>Some more content to scroll past...</h2>
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

jQuery Slick Slider: How to scroll less than one entire slide

Using Slick Slider I'm trying to create a carousel that on the first slide it will show 75% of the slide and when scrolling it should only show 75% of the next slide.
First slide only showing 75% and then 25% of next slide
What is happening: Shows 75% of next slide but does not show 25% of previous slide
What I am trying to accomplish: Show 25% of the previous slide and 75% of current slide
My current Slick Config is:
$('.myCarousel').slick({
arrows: false,
infinite: false,
slidesToShow: 0.75,
slidesToScroll: 1,
variableWidth: true
})
I've tried changing the slidesToScroll property to 0.75 with zero success. It seems that anything less than 1 and Slick Slider refuses to change slides.
I've also found that I can have my slider element, in this example .myCarousel, watch for the swipe event. I've thought about attempting to change the transform: translation(#px, #px, #px) on the carousel container, .myCarousel, with JS but I feel there must be an easier way.
Carousel HTML
<div class="gateway_nav">
<div class="border_right__red">
<div>
ASD
</div>
<div class="gateway_nav__slider_element">
ASDFG
</div>
<div class="gateway_nav__slider_element">
ASDFGH
</div>
<div class="gateway_nav__slider_element">
ASDFGHJKL
</div>
</div>
<div>
<div>
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERT
</div>
<div class="gateway_nav__slider_element">
QWERTY
</div>
<div class="gateway_nav__slider_element">
QWER
</div>
</div>
</div>

What you can do is play with the center padding:
$('.gateway_nav').slick({
arrows: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
centerPadding: '20%',
})
https://jsfiddle.net/10ftk4w2/
I don't have your CSS so I'm guessing here.

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>

Owl Carousel - width is calculated wrong

I have three responsive items (imgs), but every time the Owl-Carousel is loaded, the owl-wrapper width is two times the size of all images together.
For example; if the images fullsize takes 1583 px, the owl-wrapper takes 1583 * 3 * 2 = 9498px, and all site takes this width, instead the full size (1583 px).
The issue: http://nacionalempreendimen.web2144.uni5.net
HTML
<div id="promoted-carousel">
<div class="item"><img src="assets/img/tmp/1.jpg"></div>
<div class="item"><img src="assets/img/tmp/2.jpg"></div>
<div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>
CSS
#promoted-carousel .item img{
display: block;
width: 100%;
height: auto;
}
JS
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
UPDATE
I saw that when I put #promoted-carousel div out of .page-wrapper div, it works properly. But my knowledge of css it is not sufficient to understand why it works.

it helped me:
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);

this solution helped me too , if your theme is using bootstrape 4 and the owl plugin is using bootstrape 3 this will fix the owl width issue
setTimeout(function() {
$('#promoted-carousel').owlCarousel({
autoPlay: 5000,
stopOnHover: true,
singleItem: true
});
}, 10);

I often use 2 wrappers when working with Owl Carousel. I'd set all my styles per-slide for their height/width etc and the outer wrapper I'd set for the stage width etc.
I then call owl carousel on the inner wrapper and I usually have very few problems
<div id="promoted-carousel-outer">
<div id="promoted-carousel">
<div class="item"><img src="assets/img/tmp/1.jpg"></div>
<div class="item"><img src="assets/img/tmp/2.jpg"></div>
<div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>
</div>

This problem is a known issue. You need to put table-layout: fixed on the table.
https://github.com/OwlFonk/OwlCarousel/issues/274

Unbelievably, I suspect that this might be a bug within owlCarousel.
What helped me was removing the * 2 in appendWrapperSizes:
appendWrapperSizes : function () {
var base = this,
width = base.$owlItems.length * base.itemWidth;
base.$owlWrapper.css({
"width": width,//Comment out this part=> * 2,
"left": 0
});
base.appendItemsSizes();
},
This worked for owlCarousel 1.3.3.