this is my first question on stackoverflow.
Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.
image
Thanks in advance!
edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 7,
slidesToScroll: 6,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 4
}
}, {
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
margin: 50px;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: blue;
}
#media screen and (max-width: 768px) {
.slick-dots {
position: initial !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x300?text=1">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/550x300?text=2">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
</section>
Check this:
https://jsfiddle.net/7pa8jq4a/5/
I used to center:
display: flex;
align-items: center;
justify-content: center;
I added wrapper div to slide and to img style max-height and max-width;
I tweaked you version a little bit (in case you do not want flex-box):
https://jsfiddle.net/fr74h8k5/2/
.slick-slide .image {
height: 200px;
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Here is what you need:
1) at first, set section { text-align:center;}
2) set slick-track div to :
.slick-track{
display: flex;
align-items: center;
}
3) and for example
.slick-slide img {
..........
max-width: 150px;
max-height: 150px;
}
thats all (source: How to vertically center divs? )
I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.
Related
This is my current Slick Carousel.
There are 4 items in a row, and I want to add margin between each item without changing current aspect-ratio: 1.3/1;
I find that I have difficulty to override the vue-slick-carousel classes. Is Anyone know how to do it?
HelloWorld.vue
<template>
<div class="slick">
<VueSlickCarousel
v-bind="{
arrow: true,
focusOnSelect: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
touchThreshold: 5,
}"
>
<div class="slick-item">1</div>
<div class="slick-item">2</div>
<div class="slick-item">3</div>
<div class="slick-item">4</div>
<div class="slick-item">5</div>
<div class="slick-item">6</div>
<template #prevArrow="">
<button class="arrow-btn">
<img src="#/assets/images/common/arrow-right.svg" alt="arrow-left" />
</button>
</template>
<template #nextArrow="">
<button class="arrow-btn">
<img src="#/assets/images/common/arrow-right.svg" alt="arrow-left" />
</button>
</template>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
export default {
components: { VueSlickCarousel },
};
</script>
<style scoped lang="scss">
// override default class
.slick-slider {
display: flex;
align-items: center;
border: 1px solid grey;
}
.slick-item {
aspect-ratio: 1.3/1;
max-width: 280px;
margin-left: 10px;
background-color: #e5e5e5;
}
.arrow-btn {
border: none;
img {
height: 40px;
}
}
</style>
Codesandbox:
https://codesandbox.io/s/empty-leftpad-ti367?file=/src/components/HelloWorld.vue
If you look at the examples on the npm package itself, spacing between slides are achieved by wrapping each slide with an additional <div> element and then adding margins to the inner one.
Your best bet is to update your DOM as such, by wrapping your .slick-item element with an additional <div>:
<div><div class="slick-item">1</div></div>
Then in your CSS it is a matter of adding an arbitrary horizontal margin, e.g. margin: 0 5px to achieve a 10px spacing between each slide:
.slick-item {
margin: 0 5px;
background-color: #e5e5e5;
aspect-ratio: 1.3/1;
max-width: 280px;
}
See proof-of-concept example: https://codesandbox.io/s/charming-bas-b78ke?file=/src/components/HelloWorld.vue
Im trying to create a slider that has the main image about 60% of the screen and then 20% of the previous and next image next to it. Here is an example http://www.qantumthemes.xyz/onair2/wpdemo/
Im trying to use slick slider and the example here https://kenwheeler.github.io/slick/ under Slider Syncing where it has the option centerMode. The problem is that I can't seem to find a way to set the width of the previous and next images.
Here is the code I have so far with slick slider
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>
I created this fiddle, which works they way you're asking https://jsfiddle.net/uqy8L69g/.
Main fix was to initialize variableWidth to true and set width for the slides:
.slick-slide {
width: 2em;
}
.slick-active {
width: 5.5em;
border: .1em solid black;
}
The problem is the weird move it does while changing slides. This happens because of centerMode. It implements padding only after the sliding was done. To fix that, I would play with transitions using onAfterChange (you can read about it here: https://github.com/kenwheeler/slick/issues/1005).
I've been working on a cards slider using Slick Carousel (http://kenwheeler.github.io/slick/). I want it to loop infinitely and work at varying browser widths without the cards stacking, it's not quite there at the moment. At the moment it's jerky on the loop (after 5 slides).
If anyone could help me that would be great, I've got a demo up on CodePen!
https://codepen.io/cbg/pen/YQdqPQ
<head>
<style type="text/css">
body {
margin: 0;
}
#slider {
background-color: #f5f7f9;
padding: 80px;
overflow: auto;
}
.service {
width: 260px !important;
height: 303px;
background-color: white;
float: left;
margin: 0 15px;
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15);
border-radius: 4px;
}
.slick-arrow {
display: none !important;
}
.pod1 {
background-image: url(fakepods/pod1.png);
}
.pod2 {
background-image: url(fakepods/pod2.png);
}
.pod3 {
background-image: url(fakepods/pod3.png);
}
.pod4 {
background-image: url(fakepods/pod4.png);
}
.pod5 {
background-image: url(fakepods/pod5.png);
}
</style>
</head>
<body>
<div id="slider" class="center slider">
<div class="pod1 service"></div>
<div class="pod2 service"></div>
<div class="pod3 service"></div>
<div class="pod4 service"></div>
<div class="pod5 service"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".center").slick({
dots: false,
infinite: true,
centerMode: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 250,
});
});
</script>
</body>
Slick wants to resize your boxes since it calculates all measurements (such as movement distance) off of the available space and the number of cards you want to show. You compensated by adding !important to your card css width.
Rather than fighting with Slick, use its functionality to get the widths you want. Set your slider width to N times the width plus margin of your cards, where N is the slidesToShow setting. Center it in your parent element using margin auto:
#slider {
padding: 80px;
overflow: visible;
width:1160px;
margin:0 auto;
}
Then adjust for smaller browser window widths by wrapping it in a container with a max-width:100% and an overflow:hidden.
#container{
background-color: #f5f7f9;
overflow:hidden;
max-width:100%;
height:100%;
}
This works most of the time. Slick creates the infinite loop by cloning your cards so that there's two sets, and then occasionally moving them to the other end of your slider to appear to be an infinite line of cards. On very wide screens where there's only 5 cards you may sometimes see a blank space at the end. In my pen, I copied your cards, so when Slick clones there will be 20 total, then increased slidesToShow to 9 and upped the width of #slider appropriately.
https://codepen.io/freer4/pen/EXGKXg
If you want to ensure that a card is always centered, you can adjust your #slider position inside the #container and set centerMode to true
https://codepen.io/freer4/pen/WOLwLe
I made a custom slide-transition with jquery cycle plugin which make the use of options: cssBefore, animIn, animOut necessary.
There are two slideshows with different widths side by side on desktopview with a fixed width.
There is a media query breakpoint, where the shows get one below the other and are supposed to get a width of 100%, which works fine so far, except one thing:
Because the cycle option accepting number values (for px) only, the transition don't adapts to the width of 100%.
Question is:
How can I make it so, that relative values are accepted?
And if this is not possible, is there another slider which offers the same transition as shown in the following example?
My Code:
HTML:
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>
Javascript:
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});
CSS:
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
#media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}
See the example on jsfiddle
I am not sure if there is any plugin BUT you can use Media Queries for example:
#media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}
this css will be executed when the screen size is less than or equal to 600px ONLY. and if the screen size is more than 600px your main css will be executed.
For full documentation about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media query demo: http://www.webdesignerwall.com/demo/media-queries/
I hope this helps.
I did not want to take the plugin code so I was wondering if someone had already managed to use plugin vertically. It's a shame on the part of this plugin can be used horizontally.
Sorry for langage...
You could rotate the carousel and then rotate the items back, like this:
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items: 3,
loop: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
rewind: true,
autoplay: true,
margin: 0,
nav: true
});
});
#import "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css";
.owl-carousel {
transform: rotate(90deg);
width: 270px;
margin-top: 100px;
}
.item {
transform: rotate(-90deg);
}
.owl-carousel .owl-nav {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: calc(50% - 33px);
}
div.owl-carousel .owl-nav .owl-prev,
div.owl-carousel .owl-nav .owl-next {
font-size: 36px;
top: unset;
bottom: 15px;
}
<div class="owl-carousel owl-theme">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%200">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%201">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%202">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%203">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%204">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%205">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%206">
<img class="item" src="https://via.placeholder.com/320x240?text=Slide%207">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Check this a codepen : https://codepen.io/marcogu00/pen/eLeWMq
Notice that drag must be disabled as it wont work properly
Here is a CodePen that solves this:
http://codepen.io/dapinitial/pen/xZaRqz
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
items: 1,
nav: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
Regard to the 2.0 beta it's currently not possible to slide vertically. However, the complexity has been significantly reduced by the refactoring and the plugin architecture to make room for more features. This includes in particular an API with which the various animation effects can be broken down into separate animation providers. Thus, a vertical slide would certainly be possible. However, the feature is ambitious and there are some problems to solve. Here is the current roadmap.
.item {
transform: rotate(-90deg);
}
.owl-carousel{
transform: rotate(90deg);
}
Works only with square images or square elements
Follows example with mouse enabled https://codepen.io/luis7lobo9b/pen/zYrEqKj
<!-- HTML -->
<div class="wrapper">
<div class="owl-carousel owl-carousel-vertical">
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/000/fff-->">
</div>
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/333/fff-->">
</div>
<div class="item">
<img src="<!--https://via.placeholder.com/300.png/666/fff-->">
</div>
</div>
</div>
/* CSS */
.wrapper{
height: 300px;
width: 300px;
}
.owl-carousel-vertical{
transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
transform: rotate3d(0, 0, 1, -90deg);
}
// JS
$(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: false,
nav: false,
margin: 0
});
// this code below enables drag and drop vertically. Unfortunately I was unable to disable horizontal drag and drop so it will remain active, but we already have something now =D
$('.owl-carousel').data('owl.carousel').difference = function(first, second) {
return {
x: first.x - second.x + (first.y - second.y),
y: first.y - second.y
};
};
});