how to make owl carousel slide vertically??? in demo there is only sliding horizentally. i want to customized it vertically
Try the Swiper Js libraries
More Informations Go to the Official Page of Swiper.js
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 5000,
},
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
why my owl carousel items are sorted vertical not horizontal?
Hello instead of using the class .slider-news
try using the owl-carousel
on your mark up and javascript. I think it has some default styling on the libary. I worked on this library before and I used owl carousel
. If you want custom style you can use a secondary class on owl carousel.
This is the the link on the codepen I edited.
owl carousel vertical and horizontal with the same height
If you set a max-height on the image with CSS
.owl-carousel .item img{
max-height:600px;
}
And update the JS function to include
autoWidth:true,
This should work
See demo here
http://www.owlcarousel.owlgraphic.com/demos/autowidth.html
Related Topics
Make Discord Bot Send Picture With Message With Nodejs
Scrollable Table With Fixed Headers and Fixed First Column
Javascript Generate Video Thumbnail from Video Url
Javascript Backslash (\) in Variables Is Causing an Error
How to Format Numbers by Prepending 0 to Single-Digit Numbers
How to Sort Elements in an Array into Order and Even Numbers and They Should Be in Ascending Order
Add Hyphen After Every Fourth Character in a String Seperated by Comma
How to Find If a Text Contains Url String
Increase Counter Value Upon Button Click
How to Disable Eslint Rule Max Line Length for Paragraph in <Template> of Vue.Js
How to Count Unique Value from Object of Array in JavaScript
How to Iterate Through Json Nested Objects With Ngfor
Jest Encountered an Unexpected Token: Syntaxerror: Unexpected Token {
Javascript - Remove Milliseconds from Date Object
Prevent Form Submission on Enter Key Press
Mongodb Get Data to Display in HTML