How to make owl carousal vertical

How to make owl carousal vertical - javascript

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..

Related

Accordion not working correctly (active states not being applied for each parent instance)

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!

Captions in Bootstrap Carousel animate diagonally instead of vertically

I have a Bootstrap 5 carousel with three slides, each with two lines of captions. The captions are supposed to move vertically up and down out of frame each time a slide changes. But since they are attached to the slides, which move horizontally, they end up moving out of frame diagonally.
Is there a way to fix this?
I've tried to compensate by moving the captions horizontally in the opposite direction, but that just results in them entering the frame diagonally on the next slide.
const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const SlideClass = ("slide");
var TCarousel = document.querySelector('#TestCarousel');
TCarousel.addEventListener('slide.bs.carousel', function() {
topcap.forEach(cap => cap.classList.add(SlideClass));
bottomcap.forEach(cap => cap.classList.add(SlideClass));
});
TCarousel.addEventListener('slid.bs.carousel', function() {
topcap.forEach(cap => cap.classList.remove(SlideClass));
bottomcap.forEach(cap => cap.classList.remove(SlideClass));
});
.carousel-inner .carousel-item {
transition: transform 1s ease;
}
.carousel-caption {
position: absolute;
left 0;
top: 33%;
color: white;
text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4.5vw;
transition: 1s ease;
}
.caption-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
opacity: 1;
transition: 1s ease;
}
.caption-top.slide {
font-size: 2vw;
top: -70%;
opacity: 1;
}
.caption-bottom {
position: relative;
top: 15%;
left: 0;
width: 100%;
text-align: center;
opacity: 1;
transition: 1s ease;
}
.caption-bottom.slide {
font-size: 2vw;
top: 140%;
opacity: 1;
}
#media (min-width: 993px) and (max-width: 1200px) {
.carousel-inner .carousel-item {
margin-top: 70px;
}
}
#media (max-width: 992px) {
.carousel-inner .carousel-item {
margin-top: 52px;
}
}
#media (max-width: 776px) {
.carousel-caption {
font-size: 5vw;
}
.caption-top-slide,
.caption-bottom-slide {
font-size: 2vw;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid p-0 mb-5" id="carousel">
<section class="slideshow">
<div id="TestCarousel" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</span>
<span class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</span>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span class="h1-carousel edit1 mb-5 caption-top">UP TOP</span>
<span class="h1-carousel mb-5 caption-bottom">DOWN LOW</span>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<span class="h1-carousel edit1 mb-5 caption-top">OVER &</span>
<span class="h1-carousel mb-5 caption-bottom">UNDER</span>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#TestCarousel" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" style="display: none" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#TestCarousel" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" style="display: none" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

CSS: Overflow:hidden not working on full screen

I've added the below slider (photo with text) code to my blogger html/javascript gadget. I want the slider to show the main testimonial in the middle and 2 cropped testimonials on the left and the right.
The code was supposed to look like this: https://i.imgur.com/eGM4h33.png
But it ended up like this: https://i.imgur.com/uZldIjd.png
Any idea how the issue can be solved? Here's the code:
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 2,
autoplay: false,
dots: true,
nav: true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
.testimonials {
position: relative;
overflow: hidden;
padding-top: 10px;
}
#customers-testimonials .item-details {
background-color: #F7F6F6;
color: #4A4A51;
padding: 0.5em 0.5em;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 0.2em;
font-size: 1em;
line-height: 1em;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 0.2em;
}
#customers-testimonials .item-details p {
font-size: 1em;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 10px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #000;
border: 1px solid #000;
text-align: center;
}
.owl-carousel .owl-prev {
left: 10px;
}
.owl-carousel .owl-next {
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container" style="padding:0">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'>
</script>

How to create an owl carousel with text replacing the vertical thumbnail?

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>

Hover div another div appear on top

I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>

It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/

It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});

We Keep Coding

JavaScript is the programming language of the Web.

How to make owl carousal vertical - javascript

Related

Accordion not working correctly (active states not being applied for each parent instance)

Captions in Bootstrap Carousel animate diagonally instead of vertically

CSS: Overflow:hidden not working on full screen

How to create an owl carousel with text replacing the vertical thumbnail?

Hover div another div appear on top

Categories

Resources