Owl carousel 2 using html files instead of img - javascript

I am using owl carousel 2 to create a simple sliding carousel. At the minute I am just using images however I would like to be able to use html files instead of . These html files have multiple divs in which images can be loaded into and instead of the whole image sliding away only the would change. Any suggestions as to how I could go about doing this?
Current HTML file:
<div id="carousel" class="owl-carousel">
<div class="item"><img src="Images/1.jpg" alt="img1" /></div>
<div class="item"><img src="Images/2.jpg" alt="img2" /></div>
<div class="item"><img src="Images/3.jpg" alt="img3" /></div>
<div class="item"><img src="Images/4.jpg" alt="img4" /></div>
</div>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/owl.carousel.js"></script>
<script src="Scripts/app.js"></script>

If you are Saying about HTML Elements . Then I have a solution for you.
So Let me tell u how to Create a Client Testimonials area with Owl Carousel and Bootstrap.
Make sure you have connected owl.carousel.css, owl.theme.default.min.css and owlcarousel.js.
HTML Code
<section id="clients-reviews" >
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="owl-client-reviews" class="owl-carousel owl-theme">
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
<div class="review">
<p>
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
</p>
<br>
<h4><span class="name">Salam mohd |</span> <span class="post">web designer</span> </h4>
</div>
</div>
</div>
</div>
</div>
</section>
CSS goes like This
#clients-reviews .review p{
font-family: 'PT Serif Caption', serif;
color: #ffffff;
font-size: 18px;
}
#clients-reviews .review span.name{
color:#fed136;
}
#clients-reviews .review span.post{
font-family: 'PT Serif Caption', serif;
font-weight: 300;
font-size: 14px;
color: #fed136;
text-transform: none;
}
#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
background: transparent;
color: #ffffff;
bborder: 2px solid #fed136;
font-size: 14px;
padding: 0 10px;
line-height: 14px;
}
Your JS file will be
$("#owl-client-reviews").owlCarousel({
items:1,
loop:true,
autoplay:true,
autoHeight: false,
autoHeightClass: 'owl-height',
dots:false,
nav:true,
navText:[
"<i class='fa fa-angle-left fa-2x'></i>",
"<i class='fa fa-angle-right fa-2x'></i>"
]
});
Note*
I have used Fontawesome Icons for next and pre.
If you want increase the items then use the items property.
Thankss :)

Related

Multiple/Nested tabs using jquery Click function not working

I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>

How to animate multiple elements, when using the same classes?

I'm am trying to make multiple boxes, which can expand onclick and close again when clicking on the X. Well first off, the close jquery doesn't work, but that isn't the main thing I'am looking fore, how can I optimize the code, so doesn't become 400-600 hundred lines of the same, just for each box/element.
When click on one box/element, it should expand and so should the content inside - in the order as they come. Then it can be closed again an you would be able to click on another element with the same result - using pretty much the same code.
How can I make the site know, which element has bin click on.
Thanks in advance :)
$(document).ready(function(){
$( ".calendarBox" ).click(function() {
$(".calendarBox").addClass("calendarBoxOpen").delay(2000);
$(".dateTitle").addClass("dateTitleOpen");
$(".dateMonthBox").addClass("dateMonthBoxOpen");
$(".closeMonth").addClass("showMonth");
$(".dateDayBox").addClass("dateDayBoxOpen");
$(".closeDay").addClass("showDay");
$(".dateCloseBtnBox").addClass("dateOpenBtnBox");
$(".closeHr").addClass("showHr");
$(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
$(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
$(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
});
});
$(document).ready(function(){
$( ".dateCloseBtn" ).click(function() {
$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
$(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
$(".closeHr").removeClass("showHr");
$(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
$(".closeDay").removeClass("showDay");
$(".dateDayBox").removeClass("dateDayBoxOpen");
$(".closeMonth").removeClass("showMonth");
$(".dateMonthBox").removeClass("dateMonthBoxOpen");
$(".dateTitle").removeClass("dateTitleOpen");
$(".calendarBox").removeClass("calendarBoxOpen");
});
});
.calendarBox { /*This is when closed*/
width:14.28571428571428%;
border:0.5px solid #000;
height:100%;
transition-duration:1s;
}
.calendarBox:hover {
background-color:#8abcc2;
}
.calendarBoxOpen { /*This is when opened*/
width:57.14285714285712%;
}
.calendarDate {
}
.calendarHeader {
display:flex;
}
.dateTitle { /*This is when closed*/
margin-left:15px;
display:none;
transition:ease-in-out;
transition-duration:1s;
}
.dateTitleOpen { /*This is when opened*/
display:block;
}
.dateDayMonthBox {
width:100%;
}
.dateMonthBox { /*This is when closed*/
display:inline-flex;
float:right;
}
.dateMonthBoxOpen { /*This is when Opened*/
margin-left:25px;
}
.closeMonth { /*This is when closed*/
display:none;
}
.showMonth { /*This is when opened*/
display:block;
}
.dateDayBox { /*This is when closed*/
display:inline-flex;
float:left;/*This is when open*/
}
.dateDayBoxOpen { /*This is when opened*/
float:right;
}
.closeDay { /*This is when closed*/
display:none;
}
.showDay { /*This is when opened*/
display:block;
}
.dateCloseBtnBox { /*This is when date is closed*/
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left:25px;
margin-right:5px;
display:none;
}
.dateOpenBtnBox { /*This is visible, when date open*/
display:block;
}
.dateCloseBtn {
}
.closeHr { /*This is when closed*/
display:none;
}
.showHr { /*This is when opened*/
display:block;
}
/*====Content of the calendar day=====*/
.dateDayInformationBox {
}
.dateDayInformation {
width:100%;
display:inline-flex;
overflow-y:hidden;
}
.dayActivitiesInfo { /*This is when closed*/
height:18px;
width:100%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
.dayActivitiesInfoOpned { /*This is when opened*/
height:100%;
width:50%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
/*====The txt======*/
.dayInfoTitel_1May {
}
.dayInfoTxt_1May { /*This is when closed*/
display:none;
}
.dayInfoTxt_1MayOpen { /*This is when opened*/
display:block;
}
.dayInfoBtnBox_1Maj { /*This is when closed*/
display:none;
}
.dayInfoBtnBox_1MajOpen { /*This is when opened*/
text-align: center;
margin: auto;
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendarBox">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox">
<div class="dateCloseBtn">close</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------><div class="close">
close
</div>
<div class="calendarBox" onclick="animateDayOpen_1Maj">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
<div class="dateCloseBtn">X</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
So, you have multiple boxes that you want to expand/shrink on click. You can give all that boxes one class - boxExpandable for expample, with initial width. Then user clicks on boxExpandable - you should toggle .expanded class with higher width.
If you want some content to be shown only when box is expanded - wrap it in .showWhenExpanded class, like shown below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
See this codepen

How to add animations to slick sync slider

I am using slick slider which has a functionality similar to this [Slick sync slider]. I am unable to add any animations to it. I want the image to appear from the left and text to appear from the right like this-second slide.
I tried adding animate.css and using data-animated="fadeInLeft", but that is loading all the slides at the same time and above all, it is not serving the purpose.
Is there an option where i can add animation using JS or CSS?
$('.slider-quote-block').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-image-block'
});
$('.slider-image-block').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider-quote-block',
dots: false
});
.testimonial {
img {
position:relative;
}
figcaption {
position: absolute;
bottom: 35px;
left:0px;
z-index: 1;
h5 {
color: white;
font-size: 16px;
padding: 0px 38px;
position: relative;
display: inline-block;
font-size: 22px;
font-family: $font-stack;
&:last-child {
font-size: 22px;
font-family: $font-arial;
padding-left:15px;
&:before {
content: "";
position: absolute;
background-color: $cabaret;
top: -5px;
left: -13px;
height: 35px;
width: 3px;
}
}
}
}
}
.slider-image-block, .slider-quote-block {
width:50%;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="testimonial clearfix">
<!--image-->
<div class="slider-image-block">
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 1">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 2">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 3">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 4">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
<div class="image-overlay">
<img src="images/testimonial1.png" alt="slider-image 5">
<figcaption><h5>name</h5><h5>designation</h5></figcaption>
</div>
</div>
<!--quote-->
<div class="slider-quote-block">
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
<div class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
</div>
</section>
As far as I can tell, there is no built-in option in Slick to use a custom animation or transition. You could open an issue about this, although I am not sure if the author wants to support this.
Anyway, I found that if you really want to use Slick and want to have custom transitions, you can do it using a bit of a hack. I have cooked up a JSFiddle that demonstrates this. Hopefully this is what you wanted?
To make it so that part of a slide comes in from one side and part from the other side, I have used the options in Slick to step two slides at a time. In the custom event listener, these two slides are then given different animations to achieve the effect you are looking for.
The relevant code is the event listener in the following.
var slides = $('.slide');
$('.slick').slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
speed: 0 // hack to disable Slick transitions
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
slides.removeClass('slideInLeft slideInRight');
// use custom transition
slides.eq(nextSlide).addClass('slideInLeft');
slides.eq(nextSlide + 1).addClass('slideInRight');
});
It is a combination of disabling Slick transitions by setting the speed to 0 and applying a custom transition in the event listener. AFAIK, there is currently no way to disable transitions in a nicer way, but that would of course be preferable. Another option would be to not use Slick at all, but I leave that up to you to decide.
EDIT: Changing the animation speed (JSFiddle) and using a synced slider (JSFiddle) can also be done, per request in comments. To make the slides appear as one slide in the navigation slider, some more CSS can be used (JSFiddle).

Bootstrap 3 carousel showing multiple panels

I have a site that uses a carosel but I want the next item to the left and right to be partially visible.
As you can see, I have the desired affect on an empty page but when porting it over it behaves strangely.
Here is the code I have used.
HTML
<section id="one">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="c1">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target=
"#c1"></li>
<li data-slide-to="1" data-target="#c1"></li>
<li data-slide-to="2" data-target="#c1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
111111111e</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
2222222</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
3333333333333333</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
</div><a class="left carousel-control" data-slide=
"prev" href="#c1"><i class=
"glyphicon glyphicon-chevron-left"></i></a> <a class=
"right carousel-control" data-slide="next" href=
"#c1"><i class=
"glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
CSS
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 140%;
left: -18%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 1);
width: 25%;
}
JQuery
$(document).ready(function () {
$('#c1').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
Is there a cleaner way of doing this, rather than expanding the inner element and cloning the children?
Here is what it looks like when I port it over...
However, when I adjust the sizing, you can see the cloned elements slide along from behind.

Using jQuery to do a slide transition when hiding one div and displaying another overtop of it

I am attempting to create a slide up effect using jQuery or pure css.
I have a container div and then 2 content divs inside. I would like to achieve an effect like in the first tile in this demo on mouse hover and mouse out.
Please see this https://jsfiddle.net/jfyacwvg/ of my current code. You will notice that when hovering over Item 1 the paragraph appears. This is fine but I want it to appear with some sort of slide effect.
Please do not mind the fact that Item 2 and 3 change when hovering Item 1, I will have to fix that later on.
Here is my JavaScript code to hide show, but please see the jsfiddle link for everything:
$(".card").hover(
function () {
$(".content-1").hide();
$(".content-2").show();
}, function() {
$(".content-2").hide();
$(".content-1").show();
}
);
Here is the html:
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="content-1" style="height: 300px">
<img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
<h3 class="text-center">Item 1</h3>
</div>
<div class="content-2" style="display: none; height: 300px;">
<p style="margin:30px 0 30px 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="content-1" style="height: 300px">
<img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
<h3 class="text-center">Item 2</h3>
</div>
<div class="content-2" style="display: none; height: 300px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="content-1" style="height: 300px">
<img src="http://placehold.it/350x150" class="img-responsive" style="margin-left: auto; margin-right: auto;" />
<h3 class="text-center">Item 3</h3>
</div>
<div class="content-2" style="display: none; height: 300px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's just change the hide/show for slideUp/slideDown:
$(".card").hover(
function () {
$(".content-1").slideUp();
$(".content-2").slideDown();
}, function() {
$(".content-2").slideUp();
$(".content-1").slideDown();
}
);
Your fiddle updated:
https://jsfiddle.net/jfyacwvg/2/
Look at this JSFiddle, it is done in CSS.
https://jsfiddle.net/de8L2f1L/
The position of the p inside the div is at the top: 0px; just as it normally would be. When you hover over the p it then moves up, top: -200px with a transition of 2 seconds (which can be changed). The reason it is set to change to -200px is because the height of your div is 200px.
overflow: hidden was applied to the div to keep it from expanding with the size of the p.
One thing you need to worry about is that your img, p, etc do not span more than twice height of the div because you would then always be missing the content in the middle as it would go from being hidden below to being hidden above.

Categories

Resources