I need to make an owl carousel with a sidebar/vertical thumbnail section that acts as a latest news section. However, replacing the thumbnails are boxes with what the next slide is about. I also need a section for text. I have come up with the following code but I don't know what to do with it.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="owl-carousel owl-theme" id="sync1">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
<div class="owl-carousel owl-theme" id="sync2">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
</body>
</html>
CSS:
#sync1 {
.item {
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
}
#sync2 {
.item {
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
h1 {
font-size: 18px;
}
}
.current .item {
background: #0c83e7;
}
}
.owl-theme {
.owl-nav {
/*default owl-theme theme reset .disabled:hover links */
[class*='owl-'] {
transition: all .3s ease;
&.disabled:hover {
background-color: #D6D6D6;
}
}
}
}
//arrows on first carousel
#sync1.owl-theme {
position: relative;
.owl-next, .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
.owl-prev {
left: 10px;
}
.owl-next {
right: 10px;
}
}
Javascript
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: true,
dots: true,
loop: true,
responsiveRefreshRate: 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2.on('initialized.owl.carousel', function() {
sync2.find(".owl-item").eq(0).addClass("current");
}).owlCarousel({
items: slidesPerPage,
dots: true,
nav: true,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//end block
sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
This is the look I am going for.
https://i.stack.imgur.com/MtBRf.png
this is solution in slick plugin:
$('.slider').slick({
slidesToShow: 7,
slidesToScroll: 1,
responsive: [
{
breakpoint: 866,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 320,
settings: {
slidesToShow: 3
}
}]
});
html code:
<div class="slider slider-nav">
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
</div>
Related
I have accordions which on click, grow in height and also changes the image to what is relevant to that section (this is done based on data-id).
Here are the requirements that I'm trying to achieve:
Each accordion group is contained within .accordionRepeater__wrapper and for each instance of that class, I'm trying to get the first .accordionCard. to have the open state.
Only have the first .accordionCard in each accordionRepeater__wrapper open on page load, so the user can see some content by default.
Only have one .accordionCard in each accordionRepeater__wrapper open at a time (user cannot have two or more accordionCard open in a accordionRepeater__wrapper at one time).
Currently results:
The first .accordionCard in the first .accordionRepeater__wrapper has the class of .accordionCard--open on page load, but doesn't show the content for it.
The first instance of .accordionCard in the second .accordionRepeater__wrapper doesn't have the class of .accordionCard--open and doesn't show the image. Only when I click on it does the image and content show.
See my attempt here:
$(function() {
const card = $(".accordionCard");
const expand_icon = $(".accordionCard__expand");
// open first accordion in each .accordionRepeater__wrapper by default
$(".accordionCard:first accordionCard__expand").addClass("expanded");
$(".accordionCard:first").addClass("accordionCard--open");
$(".accordionRepeater__image:first").addClass("d-block");
card.click(function() {
var hidden = $(this).children(".accordionCard__body--hidden");
// only have one card open at a time
expand_icon.removeClass("expanded");
card.removeClass("accordionCard--open");
/* CLOSE CARD */
if ($(this).hasClass("accordionCard--open")) {
TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut
});
$(this).removeClass("accordionCard--open");
$(this).find(expand_icon).removeClass("expanded");
}
/* OPEN CARD */
else {
TweenMax.set(hidden, {
height: "auto"
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut
});
$(this).addClass("accordionCard--open");
$(this).find(expand_icon).addClass("expanded");
// show correct image
var id = $(this).attr('data-item');
$(".accordionRepeater__image").removeClass("d-block");
$(".accordionRepeater__image[data-item='" + id + "']").addClass("d-block");
}
/* END */
});
});
:root {
--green: #089F84;
--white-2: #F7F7F7;
--black-2: #2C3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3">
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1">
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>
You are not expanding the accordions at the start. You are doing it only on click.
Also the method needs to handle expansion and close at set level. And not globally.
It can be done like this:
$(function() {
const card = $('.accordionCard');
const expand_icon = $('.accordionCard__expand');
$('.accordionCard:first-child').each((i, a) => toggleAc(a));
card.click(function() {
toggleAc(this);
});
// expand/close given accordions
function toggleAc(acdn) {
var hidden = $(acdn).children('.accordionCard__body--hidden');
const isOpen = $(acdn).hasClass('accordionCard--open');
/* CLOSE CARD */
if (isOpen) {
return; // this ensures that at least one will remain open all the time
/*TweenMax.to(hidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
$(acdn).removeClass('accordionCard--open');
$(acdn).find(expand_icon).removeClass('expanded');
*/
} else {
// close previous card in the same set
const parent = $(acdn).parent();
const expandedCard = parent.find('.accordionCard--open');
const expandedIcon = parent.find('.expanded');
const expandedCardHidden = expandedCard.children('.accordionCard__body--hidden');
TweenMax.to(expandedCardHidden, 0.3, {
height: 0,
immediateRender: false,
ease: Power1.easeOut,
});
expandedIcon.removeClass('expanded');
expandedCard.removeClass('accordionCard--open');
/* OPEN CARD */
TweenMax.set(hidden, {
height: 'auto',
});
TweenMax.from(hidden, 1, {
height: 0,
immediateRender: false,
ease: Back.easeOut,
});
$(acdn).addClass('accordionCard--open');
$(acdn).find(expand_icon).addClass('expanded');
// show correct image
var id = $(acdn).attr('data-item');
const grandParent = parent.parent().parent().parent();
grandParent.find('.accordionRepeater__image').removeClass('d-block');
grandParent
.find(".accordionRepeater__image[data-item='" + id + "']")
.addClass('d-block');
}
/* END */
}
});
:root {
--green: #089f84;
--white-2: #f7f7f7;
--black-2: #2c3645;
}
.accordionRepeater {
padding: 130px 0 156px 0;
}
.accordionRepeater__wrapper {
padding-bottom: 140px;
}
.accordionRepeater__wrapper:last-child {
padding-bottom: 0;
}
.accordionRepeater__row--even {
flex-direction: row-reverse;
}
.accordionRepeater .accordionCard {
margin: 13px 0;
cursor: pointer;
padding-left: 26px;
}
.accordionRepeater .accordionCard:hover .accordionCard__body-label {
color: var(--green);
}
.accordionRepeater .accordionCard--open {
background-color: var(--white-2);
padding: 36px 48px 45px 26px;
border-radius: 10px;
}
.accordionRepeater .accordionCard__expand {
position: absolute;
}
.accordionRepeater .accordionCard__expand:before,
.accordionRepeater .accordionCard__expand:after {
content: '';
display: block;
position: absolute;
top: 50%;
transform: translate(0px, 10px);
right: 0;
margin: 0 0 -8px;
background-color: var(--green);
border-radius: 5px;
}
.accordionRepeater .accordionCard__expand:before {
right: 8px;
width: 3px;
height: 16px;
transition: all 0.5s ease;
margin-top: -7.5px;
}
.accordionRepeater .accordionCard__expand:after {
right: 1px;
width: 16px;
height: 3px;
margin-top: -1.5px;
}
.accordionRepeater .accordionCard__expand.expanded:before,
.accordionRepeater .accordionCard__expand.expanded:after {
background-color: var(--black-2);
}
.accordionRepeater .accordionCard__expand.expanded:before {
height: 0;
margin-top: 0;
}
.accordionRepeater .accordionCard__body {
margin-left: 20px;
}
.accordionRepeater .accordionCard__body--visible {
width: 100%;
}
.accordionRepeater .accordionCard__body--hidden {
overflow: hidden;
height: 0;
}
.accordionRepeater .accordionCard__body-label {
transition: all 0.5s ease;
margin-left: 20px;
}
.accordionRepeater .accordionCard__body-copy {
padding: 24px 0 17px 0;
}
.accordionRepeater .accordionCard__body-link {
transition: none;
}
.accordionRepeater__image {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<div class="accordionRepeater">
<div class="container">
<!-----------
-- FIRST SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--odd">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD 2 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="2">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum 2</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum 2</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
<img class="accordionRepeater__image" src="https://picsum.photos/550" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="2" />
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="3" />
</div>
</div>
</div>
</div>
<!-----------
-- FIRST SET END
-------------->
<!-----------
-- SECOND SET
-------------->
<div class="accordionRepeater__wrapper">
<div class="row justify-content-between align-items-center accordionRepeater__row accordionRepeater__row--even">
<div class="col-12 col-lg-6">
<div class="accordionRepeater__text">
<div class="accordionRepeater__text-accordion">
<!-- CARD 1 -->
<div class="accordionCard position-relative d-flex flex-column" data-item="1">
<div class="accordionCard__body">
<div class="accordionCard__expand"></div>
<span class="accordionCard__body-label d-block">Lorum</span>
</div>
<div class="accordionCard__body--hidden">
<div class="accordionCard__body-copy">
<p>Lorum ipsum</p>
</div>
</div>
</div>
<!-- CARD END -->
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="accordionRepeater__graphic">
<img class="accordionRepeater__image" src="https://picsum.photos/500" alt="placeholder-graphic" loading="lazy" style="max-width: 100%; height: auto;" data-item="1" />
</div>
</div>
</div>
</div>
<!-----------
-- SECOND SET END
-------------->
</div>
</div>
Change this line:
if ($(this).hasClass("accordionCard--open")) {
To:
if ($(this).hasClass("accordionCard--open") == true) {
Otherwise, it doesn't really do anything. I Hope this is what you needed!
I'm trying to make the owl carousel vertical as shown below image:
Kindly suggest if anyone knows some other similar control.
$(function() {
// Owl Carousel
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 3,
margin: 10,
rtl: true,
center: true,
loop: true,
nav: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
Add owl-carousel slider properties and some css
$(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: false,
nav: false,
margin: 0,
autoplay: true,
dots:false
});
$('.owl-carousel').data('owl.carousel').difference = function(first, second) {
return {
x: first.x - second.x + (first.y - second.y),
y: first.y - second.y
};
};
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel {
display:block
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
.owl-carousel-vertical{
transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
transform: rotate3d(0, 0, 1, -90deg);
}
.owl-nav{ transform: rotate3d(0, 0, 1, 0deg); }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme owl-carousel-vertical">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
For more reference please visit this link Click..
I want to hide all the contents except the center one.
Take above image as example, only "Content 1" is showing, the rest are hidden. But the images are still showing.
When click to 2nd image, "Content 2" will show instead and hide "Content 1".
I try to use jquery find "slick-center" class and remove the hidden content, but it's not working. Hoping that some of you could provide me with some advice. Thank you!
$('.slick-wrap').on('init', function(event, slick){
var dots = $( '.slick-dots li' );
dots.each( function( k, v){
$(this).find( 'button' ).addClass( 'heading'+ k );
});
var items = slick.$slides;
items.each( function( k, v){
var text = $(this).find( 'h2' ).text();
$( '.heading' + k ).text(text);
});
});
$('.slick-wrap').slick({
dots: true,
focusOnSelect: true,
infinite: true,
arrows: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
centerMode: true,
centerPadding: '30px',
responsive: {
600: {
items: 2
}
}
});
if ($('.slick-item').hasClass("slick-center")){
$('div').removeClass( "cont-hide" );
}
.slick-section{
padding: 25px;
text-align: center;
}
.slick-container{
width: 100%;
margin: 0 auto;
}
.slick-wrap{
margin: 0 -10px;
}
.slick-item{
padding: 0 10px;
}
h2{
display:none;
}
.slick-dots {
list-style-type: none;
margin: 25px 0 0;
padding: 0;
}
.slick-dots li {
width: auto;
height: auto;
display: inline-block;
padding: 0 5px;
}
button{
width: auto;
height: auto;
padding: 10px;
font-size: 12px;
color: #666;
border: none;
background: #f0f0f0;
}
.slick-active button{
background: #ccc;
}
.cont-hide{
display:none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<section class="slick-section">
<div class="slick-container">
<div class="slick-wrap">
<div class="slick-item">
<h2>Image 1</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 1</div>
</div>
<div class="slick-item">
<h2>Image 2</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 2</div>
</div>
<div class="slick-item">
<h2>Image 3</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 3</div>
</div>
<div class="slick-item">
<h2>Image 4</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 4</div>
</div>
<div class="slick-item">
<h2 class="cont-hide">Image 5</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 5</div>
</div>
<div class="slick-item">
<h2>Image 6</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 6</div>
</div>
</div>
</div>
</section>
Solved the issue by myself and here is the answer. If you have the better one, please suggest, thank you :)
//display first item
$('.slick-wrap').on('init', function(event, slick){
var carouselTexts = $(".slick-item .cont-hide");
var idx = $(event.target).find('.slick-list .slick-center').index();
carouselTexts.eq(idx).css('visibility', 'visible');
});
//remove and display clicked items
$('.slick-item').on('click', function() {
var carouselTexts = $(".slick-item .cont-hide");
var clickedNum = $(".slick-slide").index(this);
carouselTexts.not(clickedNum).css('display', 'none')
carouselTexts.eq(clickedNum).css('display', 'initial');
});
I'd like to make an operational process creator. I need to have a left side column with actions, and I need to drag to right sided columns that can be in html or generated by a new column button.
I have some workarounds to do it that I dont know how to.
the actions column ( left side ) cannot "lose" its item that was drag to other columns.
the left side column don't receive any objects dragged from another column.
This is my code that is doing in a poor way only the first item. When drag some item to another collun this item does not adjust to layout.
var dragContainer = document.querySelector('.drag-container');
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;
// Init the column grids so we can drag those items around.
itemContainers.forEach(function(container) {
var cloneMap = {};
var grid = new Muuri(container, {
items: '.board-item',
dragEnabled: true,
dragSort: function() {
return columnGrids;
},
dragContainer: dragContainer,
dragAutoScroll: {
targets: item => {
return [{
element: window,
priority: 0
},
{
element: item.getGrid().getElement().parentNode,
priority: 1
}
];
}
}
})
.on('dragInit', function(item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function(item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
item.getGrid().refreshItems([item]);
}).
on('layoutStart', function() {
boardGrid.refreshItems().layout();
}).on('receive', function(data) {
cloneMap[data.item._id] = {
item: data.item,
grid: data.fromGrid,
index: data.fromIndex
};
})
.on('send', function(data) {
delete cloneMap[data.item._id];
})
.on('dragReleaseStart', function(item) {
var cloneData = cloneMap[item._id];
if (cloneData) {
delete cloneMap[item._id];
var clone = cloneData.item.getElement().cloneNode(true);
clone.setAttribute('class', 'item');
clone.children[0].setAttribute('style', '');
var items = cloneData.grid.add(clone, {
index: cloneData.index,
active: false
});
cloneData.grid.show(items);
}
});
columnGrids.push(grid);
});
boardGrid = new Muuri('.board', {
dragEnabled: true,
layout: {
horizontal: true
},
items: '.board-column',
dragAxis: 'x',
dragHandle: '.board-column-header:not(.noDrag)'
});
function generateBoard() {
var itemElem = document.createElement('div');
var itemTemplate = '<div class="board-column default"><div class="board-column-container"><div class="board-column-header">Nova</div><div class="board-column-content-wrapper"><div class="board-column-content w-100"></div></div></div></div>';
itemElem.innerHTML = itemTemplate;
boardGrid.add([itemElem.firstChild]);
var dragContainer = document.querySelector('.drag-container');
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var lastitem = [itemContainers[itemContainers.length - 1]];
lastitem.forEach(function(container) {
var grid = new Muuri(container, {
items: '.board-item',
dragEnabled: true,
dragSort: function() {
return columnGrids;
},
dragContainer: dragContainer,
dragAutoScroll: {
targets: item => {
return [{
element: window,
priority: 0
},
{
element: item.getGrid().getElement().parentNode,
priority: 1
}
];
}
}
}).
on('dragInit', function(item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
}).
on('dragReleaseEnd', function(item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
item.getGrid().refreshItems([item]);
}).
on('layoutStart', function() {
boardGrid.refreshItems().layout();
});
columnGrids.push(grid);
});
}
$("#newCol").click(function() {
var board = generateBoard();
});
.removeSelecao:hover {
cursor: pointer;
}
* {
box-sizing: border-box;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 20px 10px;
}
.drag-container {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}
.board {
position: relative;
overflow-x: auto;
width: 100% !important;
height: 100vh;
}
.board-column {
position: absolute;
left: 0;
top: 0;
padding: 0 10px;
width: calc(100% / 5);
z-index: 1;
}
.board-column.muuri-item-releasing {
z-index: 2;
}
.board-column.muuri-item-dragging {
z-index: 3;
cursor: move;
}
.board-column-container {
position: relative;
width: 100%;
height: 100%;
}
.board-column-header {
position: relative;
height: 50px;
line-height: 50px;
overflow: hidden;
padding: 0 20px;
text-align: center;
background: #333;
color: #fff;
border-radius: 5px 5px 0 0;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#media (max-width: 600px) {
.board-column-header {
text-indent: -1000px;
}
}
.board-column.azul .board-column-header {
background: #4A9FF9;
}
.board-column.laranja .board-column-header {
background: #f9944a;
}
.board-column.verde .board-column-header {
background: #2ac06d;
}
.board-column-content-wrapper {
position: relative;
padding: 8px;
background: #f0f0f0;
height: calc(100vh - 250px);
overflow-y: auto;
border-radius: 0 0 5px 5px;
}
.wraperH {
/*height: calc(100vh - 100px);*/
}
.board-column-content {
position: relative;
min-height: 100%;
}
.board-item {
position: absolute;
width: calc(100% - 16px);
margin: 8px;
}
.board-item.muuri-item-releasing {
z-index: 9998;
}
.board-item.muuri-item-dragging {
z-index: 9999;
cursor: move;
}
.board-item.muuri-item-hidden {
z-index: 0;
}
.board-item-content {
position: relative;
padding: 20px;
background: #fff;
border-radius: 4px;
font-size: 17px;
cursor: pointer;
-webkit-box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
}
#media (max-width: 600px) {
.board-item-content {
text-align: center;
}
.board-item-content span {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Lista de Planos de Ações</title>
<meta name="description" content="A responsive bootstrap 4 admin dashboard template by hencework" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- Preloader -->
<div class="preloader-it">
<div class="loader-pendulums"></div>
</div>
<!-- /Preloader -->
<!-- HK Wrapper -->
<div class="hk-wrapper hk-alt-nav">
<!-- Top Navbar -->
<div th:replace="fragments/layout-navbar::navbar(userFullName=${user.firstName + ' ' + user.lastName})"></div>
<!-- /Top Navbar -->
<!-- Main Content -->
<div class="hk-pg-wrapper">
<!-- Container -->
<div class="container-fluid mt-xl-50 mt-sm-30 mt-15">
<div class="row">
<div class='col-sm-2'>
<div class="row">
<div class="col-sm">
<div class="board-column default w-100">
<div class="board-column-container">
<div class="board-column-header">Ferramentas</div>
<div class="board-column-content-wrapper">
<div class="board-column-content w-100">
<div class="board-item">
<div class="board-item-content"><span>Item #</span>1</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>2</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>3</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>4</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>5</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<section class="hk-sec-wrapper wraperH">
<div class="row">
<div class="col-sm">
<button type='button' class='btn btn-success mb-10 pull-right' id='newCol'><i class="fa fa-plus" aria-hidden="true"></i> Nova Coluna</button>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="drag-container"></div>
<div class="board">
<div class="board-column azul">
<div class="board-column-container">
<div class="board-column-header">Todo</div>
<div class="board-column-content-wrapper">
<div class="board-column-content w-100">
<div class="board-item">
<div class="board-item-content"><span>Item #</span>1</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>2</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>3</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>4</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>5</div>
</div>
</div>
</div>
</div>
</div>
<div class="board-column laranja">
<div class="board-column-container">
<div class="board-column-header">Working</div>
<div class="board-column-content-wrapper">
<div class="board-column-content w-100">
<div class="board-item">
<div class="board-item-content"><span>Item #</span>6</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>7</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>8</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>9</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>10</div>
</div>
</div>
</div>
</div>
</div>
<div class="board-column verde">
<div class="board-column-container">
<div class="board-column-header">Done</div>
<div class="board-column-content-wrapper">
<div class="board-column-content w-100">
<div class="board-item">
<div class="board-item-content"><span>Item #</span>11</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>12</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>13</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>14</div>
</div>
<div class="board-item">
<div class="board-item-content"><span>Item #</span>15</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- /Container -->
<!-- Footer -->
<div th:replace="fragments/layout-footer::footer"></div>
<!-- /Footer -->
</div>
<!-- /Main Content -->
</div>
<!-- /HK Wrapper -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/haltu/muuri#0.9.3/dist/muuri.min.js'></script>
</body>
</html>
im using this codepen as resource:
https://codepen.io/niklasramo/pen/zPVBLq
the muury docs are on:
https://github.com/haltu/muuri
I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>