How can i put my below code in a container - javascript

I want that my below component would come in a container but instead of coming in container if is showing like this
I want this to be in a container
continuous item by item in an vertical manner .
This happens when i use
<div class="container my-5">
<div class="main-container">
<div class="row">
<div class="col-md-12">
//my items list.
</div>
</div>
</div>
</div>
Actually I have made a project of carousel using html css jquery
now i want it to import in my node project. i want to simply copy that div section and paste it in middle of this code and it appears but it's not appearing.
When I run the code below the output is -
But i want that is should be in a container. but is it no happening need help.
(function($) {
var slide = function(ele, options) {
var $ele = $(ele);
var setting = {
speed: 1000,
interval: 10000,
};
$.extend(true, setting, options);
var states = [{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 134,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 0,
$opacity: 0.1
},
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 110,
$opacity: 1,
},
{
$zIndex: 4,
width: 250,
height: 300,
top: 0,
left: 263,
$opacity: 1
},
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 470,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 620,
$opacity: 1,
},
{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 500,
$opacity: 1,
},
];
var $lis = $ele.find("li");
var timer = null;
$ele.find(".hi-next").on("click", function() {
next();
});
$ele.find(".hi-prev").on("click", function() {
states.push(states.shift());
move();
});
$ele
.on("mouseenter", function() {
clearInterval(timer);
timer = null;
});
// .on("mouseleave", function () {
// autoPlay();
// });
move();
autoPlay();
function move() {
$lis.each(function(index, element) {
var state = states[index];
$(element)
.css("zIndex", state.$zIndex)
.finish()
.animate(state, setting.speed)
.find("img")
.css("opacity", state.$opacity);
});
}
function next() {
states.unshift(states.pop());
move();
}
function autoPlay() {
timer = setInterval(next, setting.interval);
}
};
$.fn.hiSlide = function(options) {
$(this).each(function(index, ele) {
slide(ele, options);
});
return this;
};
})(jQuery);
$(".slide").hiSlide();
body {
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.9);
}
body {
background-image: url(ur.jpg);
}
h1 {
margin: 150px auto 30px auto;
text-align: center;
color: red;
}
.hi-slide {
position: relative;
width: 754px;
height: 292px;
margin: 115px auto 0;
}
.hi-slide .hi-next,
.hi-slide .hi-prev {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
border-radius: 50px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: #fff;
color: black;
transition: all 0.6s;
font-size: 20px;
font-weight: bold;
}
.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover {
opacity: 1;
background-color: #fff;
}
.hi-slide .hi-prev {
left: -60px;
}
.hi-slide .hi-prev::before {
content: "<";
}
.hi-slide .hi-next {
right: -60px;
}
.hi-slide .hi-next::before {
content: ">";
}
.hi-slide>ul {
list-style: none;
position: relative;
width: 754px;
height: 292px;
margin: 0;
padding: 0;
}
.hi-slide>ul>li {
overflow: hidden;
position: absolute;
z-index: 0;
left: 377px;
top: 146px;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 3px solid black;
background-color: #333;
cursor: pointer;
}
/* .hi-slide > ul > li > img {
width: 100%;
height: 100%;
background-position: center;
} */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="container my-5 mt-2">
<div class="main-container">
<div class="mt-2 d-flex justify-content-around">
<h2 class="text-center">Timeline</h2>
<div class="slide hi-slide">
<div class="hi-prev"></div>
<div class="hi-next"></div>
<ul>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body space">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="140px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1600080972464-8e5f35f63d08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1564466809058-bf4114d55352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br><br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="90px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p><br/><br><br/></p>
Go somewhere
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Related

Setting up a Slick Carousel, containing sliders as individual elements

I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?

I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<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.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want

Having multiple Owl Carousels on a Shopify page

I'm writing a homepage for my business website. I encountered a problem after inserting a second Owl Carousel. The second slider is showing up fine but first one somehow disappeared. When I removed the second Carousel, the first one came back. I figured it has to do with giving the divs specific IDs or classes but no matter how I tried I can't seem to make them work.
I tried giving them specific class such as
div class="owl-one owl-carousel owl-theme" and div class="owl-two owl-carousel owl-theme"
As well as ids
div id="owl-one" class="owl-carousel owl-theme"
and div id="owl-two" class="owl-carousel owl-theme"
And changed the script to
$('.owl-one .owl-slideImg .owl-theme').owlCarousel({
$('.owl-two .owl-carousel').owlCarousel({
As well as
$('#owl-one .owl-slideImg .owl-theme').owlCarousel({
$('#owl-two .owl-carousel').owlCarousel({
What am I doing wrong? Please help!
Here is the first slider code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/bootstrap-grid.min.css">
<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.css">
<style>
.owl-slideImg .owl-nav div{
position: absolute !important;
width: 25px !important;
height: 25px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
top: 40%;
}
.owl-slideImg .owl-prev {
left: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
transform: rotate(180deg);
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-next {
right: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-prev:hover{
opacity: 1;
}
.owl-slideImg .owl-next:hover{
opacity: 1;
}
#media only screen and (max-width: 991px) { /* MOBILE */
.owl-slideImg .slide-img{
height: 250px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
padding: 40px;
}
.owl-slideImg .box-icon-svg{
display: flex;
justify-content: end;
}
.box-icon-svg img{
max-width: 30px;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
.owl-slideImg .owl-nav div{
top: 20%;
}
.owl-slideImg .owl-prev {
left: 0 !important;
}
.owl-slideImg .owl-next {
right: 0 !important;
}
}
#media only screen and (min-width: 992px) { /* PC */
.owl-slideImg .slide-box-text{
height:100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width:100%;
}
.owl-slideImg .slide-img{
height: 350px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
width: 60%;
}
.owl-slideImg .box-icon-svg{
position: absolute;
right: 0;
bottom: 0;
display: flex;
margin-right: 40px;
margin-bottom: 20px;
}
.box-icon-svg img{
max-width: 60px !important;
margin-top: -20px;
}
.owl-slideImg .owl-item{
width: 100%;
}
.service-header{
text-align: center;
justify-content: center;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
}
</style>
<main>
<br>
<br>
<br>
<h2 class="service-header">our service</h2>
<div class="col p-5">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 col-12 owl-slideImg ">
<div class="owl-carousel owl-theme">
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Installation_0702da65-4ad7-42df-9ea6-bca10d7c541a.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
Given our versatility and neat craftsmanship in stone installation, we have been providing our service to various leading construction and estate companies in Thailand.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">installation</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Installicon.svg?v=1646822679" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Supply.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With connections and credible sources from both domestic and oversea quarries, we can supply great quality stones that meet your needs and specifications.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">supply</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Supplyicon.svg?v=1646822694" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Restore.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
We let our designers draft up a digital rendered image beforehand for any customisation and specifications such as landscaping and counter tops.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">design</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Designicon.svg?v=1646822671" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Design.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With high quality machines, we can provide any finishing and resurfacing process including polishing and honing.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">restore</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Restoreicon.svg?v=1646822686" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".owl-slideImg .owl-theme").owlCarousel({
center: false,
loop: true,
autoplay: true,
autoplayTimeout: 50000,
nav: true,
dots: true,
items: 1,
margin: 40
});
});
</script>
And this is the second slider code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<br>
<div class="logoslider">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo5.jpg" alt="The Ritz Carlton">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo2.jpg" alt="Phulaybay">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo6.jpg" alt="Silpakorn">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo3.jpg" alt="Property Perfect">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo1.jpg" alt="Thames Valley">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo4.jpg" alt="The Mall Group">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo7.jpg" alt="Pirom At Vineyard">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo8.jpg" alt="NYE Estate">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo13.jpg" alt="Balcony Thailand">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo10.jpg" alt="Harbor Laemchabang">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo12.jpg" alt="Belle Rama 9">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo9.jpg" alt="Major Development">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo11.jpg" alt="Gazebo Garden">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo15.jpg" alt="360 Pano">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo14.jpg" alt="Anantarakiri">
</div>
</div>
</div>
<br>
<br>
<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/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
nav: false,
dots: false,
margin: 40,
autoplayTimeout: 1500,
responsive:{
0:{
items:4
},
600:{
items:8
},
1000:{
items:8
}
}
})
</script>
</body>
<style>
.logoslider{
display: flex;
width: 80%;
justify-content: center;
justify-items: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
</style>

Try like this
Owl Carousel One
var owl_carousel_one = $('.owl-carousel-one');
owl_carousel_one.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Owl Carousel Two
var owl_carousel_two = $('.owl-carousel-two');
owl_carousel_two.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Just use these unique classes (.owl-carousel-one, .owl-carousel-two, and so on...) for each owl carousel HTML element. No need for any ID.

Flickity - Problem with multiple carousels

I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own Flickity).
var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
var topSellerFlkty = new Flickity('.carousel-top-rated', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
.carousel-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85px;
background-color: $carousel-bg-color;
border-top: $gallery-border;
padding: 7.5px 0;
.main-carousel {
max-width: 100%;
height: 100%;
padding: 0 40px;
.carousel-cell {
width: 66px;
height: 100%;
#extend %center-flex-display;
background-color: $product-slider-bg-color;
display: inline-flex;
margin: 0 5px;
padding: 5px;
cursor: pointer;
img {
max-width: 100%;
height: auto;
}
&.is-selected {
opacity: 1;
}
&:not(.is-selected) {
opacity: 0.3;
}
}
}
.flickity-button {
background: $text-color;
padding: 0;
}
.flickity-button:hover {
#extend %bg-hover-animation;
}
.flickity-prev-next-button {
width: 30px;
height: 100%;
border-radius: 0;
}
/* icon color */
.flickity-button-icon {
fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: 5px;
}
.flickity-prev-next-button.next {
right: 5px;
}
}
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="top-rated">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-top-rated">
<div class="carousel-cell is-selected" id="carousel-top-rated-cell-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="featured">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-featured">
<div class="carousel-cell" id="carousel-featured-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
</div>
The styling is just great. Everything works on the 1st Flickity, but on the 2nd, there are no cells, just arrows and height=0 of the viewport.

Ok, I have found the solution :)
Flickity - resize option

Fort the ones still looking for a detailed solution to this problem, here's the code I'm using which works fine on multiple galleries in the same page:
const galleries = document.querySelectorAll('.block-gallery');
galleries.forEach(gallery=> {
new Flickity(gallery, {
contain: true,
setGallerySize: true,
wrapAround: true,
imagesLoaded: true
});
});

3D Card Flip: CSS scaling while maintaing image clarity

Problem
I fully understand that I cannot take a downsized image, scale it up with CSS, and not have it look blurry. But I also know I'm going about this wrong, and there is a way to do what I'm wanting.
I want to achieve this exact effect I've created, but without losing the clarity on the second (flipped / backside) card. I feel like the solution lies somewhere with the initial width/height of the backside card and transform origins, but I can't quite get it there. What am I doing wrong?
Fiddle
https://jsfiddle.net/a9dpc05t/1/
HTML
<div class="cardWrapper">
<div class="card">
<div class="cardFace front"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png" width="129"></div>
<div class="cardFace back"><img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png" width="129"></div>
</div>
</div>
CSS
body {
background-color: black;
margin:50px 150px;
font-family:Arial, sans-serif;
}
.cardWrapper{
width:129px;
height:200px;
position:relative;
float:left;
cursor:pointer;
}
.cardFace{
position:absolute;
width:129px;
height:200px;
overflow:hidden;
}
JavaScript
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 2.48,
ease: Back.easeOut
});
}
);

EDIT V2:
Here's another version trying to fix what you specified in the comment.
jsFiddle Version 2
CODE SNIPPET V2:
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 1,
ease: Back.easeOut
});
}
);
body {
background-color: black;
margin: 120px;
font-family: Arial, sans-serif;
}
.cardWrapper {
width: 387px;
height: 600px;
position: relative;
float: left;
cursor: pointer;
}
.cardFace {
position: absolute;
width: 387px;
height: auto;
overflow: hidden;
}
.cardFace img {
width: 387px;
}
.card {
transform: scale(0.248);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>
V1:
The trick is to initially scale the card down, then just apply the scale to 1 on flip.
jsFiddle
CODE SNIPPET:
TweenLite.set(".cardWrapper", {
perspective: 800
});
TweenLite.set(".card", {
transformStyle: "preserve-3d"
});
TweenLite.set(".back", {
rotationY: -180
});
TweenLite.set([".back", ".front"], {
backfaceVisibility: "hidden"
});
$(".cardWrapper").click(
function() {
TweenLite.to($(this).find(".card"), 1.2, {
rotationY: 180,
scale: 1,
ease: Back.easeOut
});
}
);
body {
background-color: black;
margin: 120px;
font-family: Arial, sans-serif;
}
.cardWrapper {
width: 144px;
height: 220px;
position: relative;
float: left;
cursor: pointer;
}
.cardFace {
position: absolute;
width: 432px;
height: 660px;
overflow: hidden;
}
.cardFace img {
width: 432px;
}
.card {
transform-origin: top right;
transform: scale(0.248);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<div class="cardWrapper">
<div class="card">
<div class="cardFace front">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/hearts.png">
</div>
<div class="cardFace back">
<img src="http://www.gannon.tv/cp_assets/3dplayingcardflip/images/spades.png">
</div>
</div>
</div>

You need to add margin and padding to the div. Also check for the proper size of the divs in the CSS.
For the best layout, margin should be added to .card and padding should be added to .front and .back
I also made a flipping cards layout. Check this out, it may help you. :)
http://codepen.io/aman_d1996/pen/WxJwoo
<html>
<head>
<title>Cards</title>
</head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container" style="margin:auto;">
<div class="row" style="margin:3px;">
<div class="col-xs-3" id="card1" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #e67e22;
background: rgba(230, 126, 34, .9);">
<h4>TILE1</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card2" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #ffc72c;
background-color: rgba(255, 199, 44, 0.901961);">
<h4>TILE2</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-6" id="card3" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #c98bdb;
background: rgba(201, 139, 219, .9);">
<h4>TILE3</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
</div>
<div class="row" style="margin:3px">
<div class="col-xs-6" id="card4" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #c98bdb;
background: rgba(201, 139, 219, .9);">
<h4>TILE4</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card5" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #ffc72c;
background-color: rgba(255, 199, 44, 0.901961);">
<h4>TILE5</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
<div class="col-xs-3" id="card6" style="padding-bottom: 16.7vw;">
<div class="front" style="border-top: 3px solid #e67e22;
background: rgba(230, 126, 34, .9);">
<h4>TILE6</h4>
</div>
<div class="back" style="background: rgb(65, 72, 65);">
<h4>BACK</h4>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body>div>div>div>div>h4 {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 17px;
font-weight: bolder;
margin-left: 12px;
color: white;
}
JS
$(function($) {
$("#card1").flip({
axis: 'y',
trigger: 'click'
});
$("#card1").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card2").flip({
axis: 'y',
trigger: 'click'
});
$("#card2").on('click', function(){
$("#card1").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card3").flip({
axis: 'x',
trigger: 'click'
});
$("#card3").on('click', function(){
$("#card2").flip(false);
$("#card1").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card4").flip({
axis: 'x',
trigger: 'click'
});
$("#card4").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card1").flip(false);
$("#card5").flip(false);
$("#card6").flip(false);
});
$("#card5").flip({
axis: 'y',
trigger: 'click'
});
$("#card5").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card1").flip(false);
$("#card6").flip(false);
});
$("#card6").flip({
axis: 'y',
trigger: 'click'
});
$("#card6").on('click', function(){
$("#card2").flip(false);
$("#card3").flip(false);
$("#card4").flip(false);
$("#card5").flip(false);
$("#card1").flip(false);
});
});

jquery ui draggable when set containment draggable div jumping

I am trying to use jQuery-UI draggable which is working fine, but I have a strange behavior. When I am setting a containment, the draggable div jumps from one side to another. When I am disabling it, then I can smoothly drag the container.
$('.bJS_issueTeaser').draggable({
'cursor': 'move',
axis: "x",
containment: "parent"
});
.b_ct_issueTeaser {
width: 37.665rem;
overflow: hidden;
max-width: 100%;
margin-top: 60px;
position: relative;
min-height: 250px;
}
.bJS_issueTeaser {
width: 50.0745rem;
position: absolute;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.67rem;
margin-right: -0.67rem;
}
.c_teaser {
width: 240px;
height: 100px;
padding-left: 0.67rem;
padding-right: 0.67rem;
}
.c_teaser-inner {
position: relative;
}
.c_description {
position: absolute;
bottom: 0;
width: 100%;
height: 2rem;
background: rgba(255, 255, 255, 0.5);
padding: 0.67rem 1.34rem;
}
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
<div class="b_ct_issueTeaser">
<div class="bJS_issueTeaser ui-draggable ui-draggable-handle">
<div class="row c_row">
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem Ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser c_teaser-right">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle

Categories

Resources