I've created a simple image carousel with arrows using Slick Slider. But I want a different h2 to be shown on top each image that slides across, like on this website.
$(document).ready(function() {
$('.top_slider').slick({
dots: false,
infinite: true,
// centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
// centerPadding: '220px',
arrows: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>'
});
});
h2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
font-size: 46px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
text-transform: uppercase;
}
<section class="top_slider">
<div>
<img src="images/image1.jpg">
<h2>text 1</h2>
</div>
<div>
<img src="images/image2.jpg">
<h2>text 2</h2>
</div>
<div>
<img src="images/image3.jpg">
<h2>text 3</h2>
</div>
</section>
At the moment that code just puts both h2's on top of each other on the first image.
The Issue you are having is due to your CSS, you are setting an absolute position for the h2 tags, but you are not setting their parents to have a relative position.
simply add a class "slide" with this style:
.slide {
position: relative;
}
and assign that class to all your slides like this:
<div class="slide">
<img src="https://unsplash.it/400/250">
<h2>text 1</h2>
</div>
<div class="slide">
<img src="http://placehold.it/400x250">
<h2>text 2</h2>
</div>
You can see a working example here.
Related
I'm using Slick Carousel this and my "next" and "previous" arrows are appearing above and below my images, rather than on each side. I'm just looking for it to appear the way it does in the Slick docs.
The buttons aren't in the html, they're generated by the slick js.
Here's the html:
<div class="albumsCarousel">
<div><img class="slickImage" src=./images/betterQuit.png></div>
<div><img class="slickImage" src=./images/betterVill.png></div>
<div><img class="slickImage" src=./images/casio.jpg></div>
<div><img class="slickImage" src=./images/betterWorried.png></div>
<div><img class="slickImage" src=./images/betterFrost.png></div>
<div><img class="slickImage" src=./images/betterWeird.png></div>
<div><img class="slickImage" src=./images/betterOphelia.png></div>
<div><img class="slickImage" src=./images/betterEnya.png></div>
<div><img class="slickImage" src=./images/betterXiu.png></div>
<div><img class="slickImage" src=./images/betterImpasse.png></div>
<div><img class="slickImage" src=./images/betterV.png></div>
<div><img class="slickImage" src=./images/betterThrone.png></div>
<div><img class="slickImage" src=./images/betterSholi.png></div>
<div><img class="slickImage" src=./images/betterPGirls2.png></div>
</div>
here's the JS:
$(document).ready(function(){
$('.albumsCarousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
nextArrow: '<i class="fa fa-arrow-right"></i>',
prevArrow: '<i class="fa fa-arrow-left"></i>'
});
and here's the CSS (which I'm pretty sure isn't playing a role here):
.slick-prev, .slick-next {
transform: translate3d(0, 0, 0);/* fix for chrome not rendering */
}
.slick-dots {
transform: translate3d(0, 0, 0);
}
I had a similar problem with slick; the navigations where above and under the image. but i solved it with this simple css.
.nextArrowBtn{
position: absolute;
z-index: 1000;
top: 50%;
right: 0;
color: #BFAFB2;
}
.prevArrowBtn{
position: absolute;
z-index: 1000;
top: 50%;
left: 0;
color: #BFAFB2;
}
Now in your slick configuration, add the classes above to the prevArrow and nextArrow attributes.
$("#slick-images").slick({
nextArrow: '<i class="icon fa-arrow-right nextArrowBtn"></i>',
prevArrow: '<i class="icon fa-arrow-left prevArrowBtn"></i>'
});
you can add other attributes as desired, optionally, you can also style the arrow to choice. but this little css positions the arrow right where you in the middle of the images. I hope this helps someone out there. Cheers!
can you please remove next and previous arrow from option and try it. you can check here the working code also.
<div class='container'>
<div class='single-item'>
<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>
</div>
css
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
js
$(".single-item").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
cssEase: "ease",
autoplay: true,
autoplaySpeed: 3000,
});
Working code check here
https://jsfiddle.net/v8xbo5sz/
Try this if its work
$(".single-item").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
});
I used the Slick.js to make a carousel just like on a picture, but I failed (
Does anybody knows any way to make a carousel just like on a picture? There should be a different width of slides, animation, and a current slide must have a bigger size
What I need to do:
What I have now - https://jsfiddle.net/fiter92/xL5qezxy/
jQuery(document).ready(function($){
$('.carousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
arrows: false,
centerMode: true,
centerPadding: '60px',
variableWidth: true
});
$('.carousel-nav').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: true,
appendArrows: '.carousel-arrows',
prevArrow: '<span class="carousel-prev"><-</span>',
nextArrow: '<span class="carousel-next">-></span>',
asNavFor: '.carousel',
});
});
.slick-slide {
padding: 20px;
}
.slick-current img {
width: 120%;
max-width: none;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=1" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=2" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=3" alt="">
</div>
<div>
<img src="http://dummyimage.com/800x400/000/fff&text=4" alt="">
</div>
<div>
<img src="http://dummyimage.com/400x400/000/fff&text=5" alt="">
</div>
<div>
<img src="http://dummyimage.com/600x400/000/fff&text=6" alt="">
</div>
</div>
<div class="carousel-nav">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
<div class="carousel-arrows">
</div>
Since you are using center mode you can add a transform of scale to the slide that gets the class slick-center. Then to animate the scale effect, you can add a transition to the slick-slide class.
.carousel .slick-slide {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.carousel .slick-center {
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
I'm trying to create a custom slider using the Slick Slider jQuery plugin.
As I wanted to have the middle (active) image bigger than the other ones, I went with the centerMode which does just that. However, by default this mode shows partial images at the left and right edge of the slider.
Does anyone know or have an idea how to get rid of these? Thanks!
[Link to Codepen]
HTML:
<div class="col-md-12"> <!-- Text Navigation --> <div class="row hidden-phone" id="slider-thumbs">
<div class="col-lg-12">
<ul class="thumbnails">
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-0">One</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-1">Two</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-2">Three</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-3">Four</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-4">Five</a>
</li>
</ul>
</div> </div>
<div class="row text-center slick-multislider">
<div class="item" data-slide-number="0">
<div>
<img src="http://lorempixel.com/600/350/cats/1 " class="img-responsive ">cat 1
</div>
</div>
<div class="item" data-slide-number="1">
<div>
<img src="http://lorempixel.com/600/350/cats/2 " class="img-responsive ">cat 2
</div>
</div>
<div class="item " data-slide-number="2">
<div>
<img src="http://lorempixel.com/600/350/cats/3 " class="img-responsive ">cat 3
</div>
</div>
<div class="item " data-slide-number="3">
<div>
<img src="http://lorempixel.com/600/350/cats/4 " class="img-responsive ">cat4
</div>
</div>
<div class="item " data-slide-number="4">
<div>
<img src="http://lorempixel.com/600/350/cats/5 " class="img-responsive ">cat5
</div>
</div> </div> </div> <div class="row text-center arrows"> <div class="span4" id="carousel-text"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2>Slider One</h2>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
</div> </div> </div>
</div>
jQuery:
$('.slick-multislider').on('init', function(event, slick) {
$('#carousel-text').html($('#slide-content-0').html());
});
$('.slick-multislider').on('afterChange', function(event, slick, currentSlide) {
$('#carousel-text').html($('#slide-content-' + currentSlide).html());
});
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '100px',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length - 1);
var id = parseInt(id);
$('.slick-multislider').slick('slickGoTo', id, false);
});
CSS:
* {
box-sizing: border-box;
}
.slick-multislider {}
.slick-slider div {
height: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: -1;
}
.slick-slider div.slick-center {
/*background: red;*/
z-index: 100;
}
.slick-slider img {
-webkit-transform: translate3d(0, 20%, 0px);
transform: translate3d(0, 20%, 0px);
}
.slick-slider .slick-center img {
-webkit-transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.arrows {
margin: 20px auto 0 auto;
width: 400px;
}
.span4, h2 {
display: block;
float: left;
width: 200px;
height: 40px;
background: red;
color: white;
}
.slick-prev {
float: left;
}
.slick-next {
float: right;
}
.slick-arrow {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 20px;
background: blue;
margin: 0 0 20px 0;
}
.slick-arrow:hover {
background: blue;
}
ul {
height: 40px;
}
li,
li.active {
list-style-type: none;
text-align: center;
text-indent: 0;
width: 10%;
height: 20px;
background-color: transparent;
border-radius: 0;
padding-bottom: 15px;
}
The solution is very simple, but poorly documented: set your centerPadding to 0.
In your case, your javascript would look like this:
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '0',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
Here's an updated fiddle:
http://codepen.io/anon/pen/MKVdPd
I am trying to build a page using both bootstrap and a Owl carousel, Owl carousel fit the purpose of the site rather that bootstraps version. So I got a tab structure where I want to put a carousel on each page, however all my attempts have failed. Here is my code
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="owl-carousel" id="owl1">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="owl-carousel" id="owl2">
<div> content</div>
<div> content</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="owl-carousel" id="owl3">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="owl-carousel" id="owl4">
<div> content</div>
<div> content</div>
</div>
</div>
</div>
</div>
Here is my javascript
$(document).ready(function () {
$('#owl1').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl2').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl3').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl4').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
//});
http://www.owlcarousel.owlgraphic.com/docs/api-events.html
First, I noticed an error in your html. You are missing a closing </div> tag for your second tab-pane. That's throwing off some of the structure of your markup.
After researching and playing around with this, it seems that this is a known issue. It stems from the fact that Bootstraps tabs are hidden initially. When you try to initialize an OwlCarousel within a hidden element, things go badly because hidden elements have no width, so Owl does not know how much space it has to work with.
My solution is to wait until a tab is shown to initialize the carousel, then destroy the carousel each time the tab is hidden. Here's my JavaScript:
$(document).ready(function () {
initialize_owl($('#owl1'));
let tabs = [
{ target: '#home', owl: '#owl1' },
{ target: '#profile', owl: '#owl2' },
{ target: '#messages', owl: '#owl3' },
{ target: '#settings', owl: '#owl4' },
];
// Setup 'bs.tab' event listeners for each tab
tabs.forEach((tab) => {
$(`a[href="${ tab.target }"]`)
.on('shown.bs.tab', () => initialize_owl($(tab.owl)))
.on('hide.bs.tab', () => destroy_owl($(tab.owl)));
});
});
function initialize_owl(el) {
el.owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
}
function destroy_owl(el) {
el.data('owlCarousel').destroy();
}
And here's a working jsFiddle.
No more JavaScript is needed than the owl carousel option.
Just replace the following lines in the bootstrap.css file and all should work well.
.tab-content > .tab-pane {
visibility: hidden;
height: 0px;
overflow:hidden;
}
.tab-content > .active {
visibility: visible;
height: auto;
overflow: visible;
}
This is the best solution:
https://www.youtube.com/watch?v=tKrt9ev4S24
.tab-content > .tab-pane{
display: block;
height: 0;
}
.tab-content > .active{
height: auto;
}
Dear friend you can put the following piece of code instead of "owl.carousel.css" until the problem is resolved.
/*
* Core Owl Carousel CSS File
* v1.3.3
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
float: left;
}
.owl-carousel .owl-wrapper-outer{
float: left;
overflow: hidden;
position: relative;
width: 200%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
You don't need to do anything with the jQuery anymore to show owl-carousel into the bootstrap tab.
If you want to take owl-carousel into the tab then you should give same IDs to each owl carousel with same class="owl-carousel".
Codepen
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div><img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have solve the problem in the way,
$("ul .nav-link").on("click", function(){
$("ul .nav-item").each(function(i,e){
$(e).find(".active").removeClass("active");
});
});
I'm using flexslider and I'm trying to add a separate text overlay to each slide, but am not having much luck.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150">
<div class="RCSlideoverlay">CLICK HERE</div>
</li>
<li>
<img src="http://placehold.it/350x150">
</li>
<li>
<img src="http://placehold.it/350x150">
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: false,
});
});
</script>
How i handled this was simply added a <span> tag with a class name below the images and then position them with CSS.
HTML:
<li>
<a href="#"><img src="http://placehold.it/660x440" width="100%" height="100%">
<span class="flex-caption">Place Hold It Image</span></a>
</li>
CSS:
/*Caption Text*/
.flex-caption {
bottom:50px;
color: white;
font-size: 16px;
line-height: 20px;
left:0;
padding:0 20px;
position:absolute;
right:0;
text-transform: uppercase;
z-index:1;
}
My flexslider had a black gradient at the bottom so I make my text white so you could read it properly. Hope that helps.