Make button under image clickable

Make button under image clickable - javascript

I'm trying to code a little 'card' that has an image, which when you hover in, it fades the image out and shows up a button which I'm trying to make clickable. The problem is that the button cannot be clicked since it's under the image and when you click on it, it registers as a click on the image. I know I could make it so the user can just click the image, but that doesn't work well on mobile since you cannot hover without clicking.
Here's my HTML: (note: this is a basic version of my actual cards)
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
//background: #1D1E28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card img:hover {
opacity: 0;
}
<div class="card" style="height: 18rem; width: 18rem;">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="...">
<div class="card-body" style="height: 172px;">
</div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button>
</div>
</div>

The solution what i see might be if hover handler will be on the .card:hover img not the .card img:hover. And remove form the image event with pointer-events: none;
.card:hover img {
opacity: 0;
pointer-events: none;
}
document.querySelector('button').addEventListener('click', ev => {
console.log('click');
ev.target.textContent = 'cliked';
});
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
background: #1d1e28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card:hover img {
opacity: 0;
pointer-events: none;
}
<div class="card" style="height: 18rem; width: 18rem">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..." />
<div class="card-body" style="height: 172px"></div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">
Manage server
</button>
</div>
</div>

Related

How do transitions work when fading in and out using css classes and javascript

I am trying to find out how transitions work. I am trying to make a thumbs up appear using a fade in fade out transition for a recycling simulator program, however, I do not know how understand how transitions work.
Here is a snippet of my html
<div class="thumbs-up-bg">
<i class="fas fa-thumbs-up" id="thumbs-up"></i>
</div>
<div class="thumbs-down-bg">
<i class="fas fa-thumbs-down" id="thumbs-down"></i>
</div>
Here is the CSS
.thumbs-up-bg {
position: absolute;
visibility: hidden;
background-color: green;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-up-bg.visible {
opacity: 1;
}
#thumbs-up {
font-size: 50px;
color: white;
}
.thumbs-down-bg {
position: absolute;
visibility: hidden;
background-color: red;
display: inline-block;
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
#thumbs-down {
font-size: 50px;
color: white;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
opacity: 0;
transition: visibility 5s, opacity 2s linear;
}
Are transitions supposed to be set on the selector that is going to be changed? Is there a simpler way to complete this task?
Here is the Javascript
if (drop === trashDropZone){
if(!isRecyclable(draggable)){
alert("Success, it is garbage");
thumbsUp.classList.toggle("visible");
setTimeout(() =>{
thumbsUp.classList.toggle("visible");
thumbsUp.classList.toggle("hidden");
}, 1000);
makeInvisible(draggable);
} else{
//show thumbs down
alert("Thumbs down");
thumbsDown.classList.toggle("visible");
setTimeout(() =>{
thumbsDown.classList.toggle("visible");
thumbsDown.classList.toggle("hidden");
}, 1000);

Is it possible to change what happens upon hover to scroll?

Please view this imageLike in the image, i have made a border which is supposed to move 20px up on scrolling above and 20px down on scrolling down. The same thing has been accomplished through hover, however i am not being able to do it upon scroll. Is it possible to change what happens upon hover to scroll?? The code can be found below;
#menu-container div{
height: 415px;
width: 52%;
border:1.5px solid black;
background:transparent;
left: 170px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-top: -120px;
}
#divi:hover{
background:transparent;
left: 220px;
/* top:35px;*/
padding-left: -20px;
}
.menu2:hover{
background:transparent;
left: 70px !important;
/* top:-80px;*/
padding-left: -200px;
}
<div id="menu-container" >
<div id="divi"> <div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%"></div></div>
</div>
<!-- <div class="menu2" style="margin-top: -399px; margin-left: 45px;"></div> </div> -->
<img class="ay" <a href="https://imgbb.com/"><img src="https://i.ibb.co/YTTxKc9/ab.png" width="275px" height="auto" style="margin-top: -400px; margin-left: 200px "> </img>

I made you an example from your code, I explained everything in the form of comments.
let cont = document.querySelector(".container")
const maxScrollTop = 395;
// onscroll property of html elements
cont.onscroll = () => {
// your two borders
let divi = document.querySelector("#divi");
let menu = document.querySelector(".menu2");
// the math, it semes complicated but not really
/* it just maps the scrollTop value between the values that we want (between 0 and 50 with the divi and between 50 and 200 with the menu) */
divi.style.left = `${50 - ((cont.scrollTop / maxScrollTop) * 50)}px`;
menu.style.left = `${50 + ((cont.scrollTop / maxScrollTop) * (200 - 50))}px`;
};
.container{
height: 200px;
overflow-y: scroll;
}
/* I made it a bit bigger for better presentation */
#menu-container div{
height: 560px;
width: 450px;
border: 1.5px solid black;
background: transparent;
left: 50px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-bottom: -160px;
}
/* this is your hover code */
/* #divi:hover{
background: transparent;
left: 220px;
/* top: 35px;
padding-left: -20px;
}
.menu2:hover{
background: transparent;
left: 70px !important;
/* top: -80px;
padding-left: -200px;
} */
<!-- we need the container so the this is what we scroll not the iframe in the snipet, which I don't know if we can reach -->
<div class="container">
<div id="menu-container" >
<div id="divi">
<div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%">
</div>
</div>
</div>
<img src="https://i.ibb.co/YTTxKc9/ab.png" width="450px" height="auto" style="margin-top: -400px; margin-left: 50px "/>
</div>

How to hide a css class in a specific slider?

I am using a bootstrap slider with a burger menu at the top, and i want to show it in every slide except for the first one. Do i have to use this burger class in every slide except for the first one? Or there is simpler way to do that? Any kind of help would be much appreciated
HTML:
<body>
<div class="navigation">
<div class="burger_deluxe">
<span class="burger_global top_bun"></span>
<span class="burger_global patty"></span>
<span class="burger_global bottom_bun"></span>
</div>
</div>
<div class="carousel-item first_slide">
</div>
<div class="carousel-item second_slide">
</div>
<div class="carousel-item third_slide">
</div>
</body>
CSS:
.navigation {
width: 100%;
height: 60px;
z-index: 400;
position: absolute;
}
.burger_deluxe {
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
width: 34px;
height: 40px;
z-index: 3;
}
.burger_deluxe .burger_global {
position: absolute;
border-top: 5px solid white;
width: 100%;
}
.burger_deluxe .burger_global.top_bun {
top: 0;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe .burger_global.patty {
top: 12px;
border-radius: 20px;
transition: opacity 500ms ease;
}
.burger_deluxe .burger_global.bottom_bun {
top: 24px;
border-radius: 20px;
transition: transform 500ms ease, border 500ms ease;
transform-origin: left center;
}
.burger_deluxe.open span {
border-color: white;
}
.burger_deluxe.open .top_bun {
transform: rotate(45deg);
}
.burger_deluxe.open .patty {
opacity: 0;
}
.burger_deluxe.open .bottom_bun {
transform: rotate(-45deg);
}

html/jquery how to hover div with its child when mouseenter

my idea is to create this:
https://blog.hubspot.com/hs-fs/hubfs/dubsat-contact-us-cities.gif?t=1490783992392&width=690&height=585&name=dubsat-contact-us-cities.gif
but the text has to be in div's with a picture not just fading in and fading out pictures. heres my shot:
#first{
position: absolute;
}
#second{
position: absolute;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
position: absolute;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<h1 id="third">Kontaktai</h1>
<!-- <div class="image">-->
<div id="first" onmouseenter="showSecondImage()" onmouseleave="hideSecondImage()">
<h4 class="text-box ">whyyyy</h4>
<img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg" >
</div>
<div id="second">
<h4 class="text-box">why its not working</h4>
<img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg" >
</div>
<script>
$(".unbinded").unbind();
function showSecondImage() {
document.getElementById('second').style.opacity=1;
}
function hideSecondImage() {
document.getElementById('second').style.opacity=0;
}
</script>
why is not not working properly? i though i need to unbind onmouseenter and onmouseleave eventlisteners and bind the picture to listen when mouse enters.. any answers appreciated, im new to this.

You can do this with CSS alone by hiding #second initially, then triggering it to show when you hover either #first or #second
#first {
position: absolute;
}
#second {
position: absolute;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
opacity: 0;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
#first:hover + #second, #second:hover {
opacity: 1;
}
<h1 id="third">Kontaktai</h1>
<div id="first">
<h4 class="text-box ">whyyyy</h4>
<img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg">
</div>
<div id="second">
<h4 class="text-box">why its not working</h4>
<img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg">
</div>

Like Coker says, You can do it only with CSS, and the pseudo-selector :hover.
div
{
width:500px;
height: 200px;
cursor: pointer;
background-size: cover;
transition: background-image .6s ease-in-out;
}
.first
{
background-image: url("http://apopka.uhcpqdoe6fq4wtztv.netdna-cdn.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg");
}
.second
{
background-image: url("http://www.twitrcovers.com/wp-content/uploads/2012/11/Winter-snow-l.jpg");
}
.first:hover
{
background-image: url("http://trucosparadecorar.com/wp-content/uploads/2016/09/oto%C3%B1o2.jpg");
}
.second:hover
{
background-image: url("http://cadenaser00.epimg.net/ser/imagenes/2016/06/20/sociedad/1466419875_801497_1466420115_noticia_normal.jpg");
}
div p
{
color: white;
text-align: center;
font-size: 24px;
position: relative;
text-shadow: 1px 1px 10px black;
top: 43%;
}
div:hover .hidden
{
display:block;
}
.hidden
{
display:none;
font-size: 14px;
}
.shadow:hover
{
background: rgba(0,0,0,0.3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hola</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="first">
<div class="shadow">
<p>Spring of Field</p>
<p class="hidden">Spring is wonderful, unless for allergic people that die each year by.</p>
</div>
</div>
<div class="second">
<div class="shadow">
<p>Snow world</p>
<p class="hidden">Go in winter, after the snow doesn't exist anymore.</p>
</div>
</div>
</body>
</html>

Owl Carousel 2 Nav on Sides

Hi I'm using Owl Carousel version 2 and can't find an example to put the navigation on the sides of the carousel like right and left chevrons or arrows. How do you do it?

I just did this yesterday:)
Firstly make sure nav is turned on in the config
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$('#_samewidth_images').owlCarousel({
margin:10,
autoWidth:false,
nav:true,
items:4,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>']
})
This will inject the controls into the DOM, see
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
Next use CSS to position the Next and Prev controls, this is what I used:
.owl-prev {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
margin-left: -20px;
display: block !important;
border:0px solid black;
}
.owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
right: -25px;
display: block !important;
border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}
For my icons I used Font Awesome but you could use anything similar. Note the navText in the javascript code, this is where you put your custom HTML. I guess you could use an image too (or put it in the background of the .owl-next and .owl-prev divs. Note I used transform to make my arrows higher.

Just a little bit improvment from #KevinSol answer above.
https://stackoverflow.com/a/40449552/10933080
This is my JS code:
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
});
and my CSS code:
.owl-prev, .owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block !important;
border:0px solid black;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }
.owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}

Customize Owl Carousel 2 Navigation Arrows
Source Link
Working Demo Link
Update the navText property
$('.owl-carousel').owlCarousel({
margin: 10,
nav: true,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
Add CSS Style
.carousel-wrap {
width: 1000px;
margin: auto;
position: relative;
}
.owl-carousel .owl-nav{
overflow: hidden;
height: 0px;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #2caae1;
}
.owl-carousel .item {
text-align: center;
}
.owl-carousel .nav-btn{
height: 47px;
position: absolute;
width: 26px;
cursor: pointer;
top: 100px !important;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled{
pointer-events: none;
opacity: 0.2;
}
.owl-carousel .prev-slide{
background: url(nav-icon.png) no-repeat scroll 0 0;
left: -33px;
}
.owl-carousel .next-slide{
background: url(nav-icon.png) no-repeat scroll -24px 0px;
right: -33px;
}
.owl-carousel .prev-slide:hover{
background-position: 0px -53px;
}
.owl-carousel .next-slide:hover{
background-position: -24px -53px;
}
span.img-text {
text-decoration: none;
outline: none;
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
cursor: pointer;
width: 100%;
font-size: 23px;
display: block;
text-transform: capitalize;
}
span.img-text:hover {
color: #2caae1;
}

HTML markup
<div id="slider" class="owl-carousel">
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
</div>
Css style
slider is class name
#slider .owl-nav div.owl-prev,
#slider .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#slider .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-next:hover,
#slider:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}
slider activation
$('#slider').owlCarousel({
loop:true,
items: 1,
margin:10,
autoplay: true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
})

I recommend using this simple style:
.owl-nav button {
position: absolute;
top: 0;
bottom: 0;
}
.owl-prev {
right: -25px;
}
.owl-next {
left: -25px;
}
.owl-nav button i {
font-size: 25px;
text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
And the following config:
nav: true,
navText: ["<i class='fa fa-chevron-right'></i>","<i class='fa fa-chevron-left'></i>"],

all-slider is class name
#all-slide .owl-nav div.owl-prev,
#all-slide .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#all-slide .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-next:hover,
#all-slide:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}`enter code here`

If you just want to do it with some CSS and one arrow in one adge, the other in the other edge without having a margin, but it covering the slider you can use this CSS:
.owl-nav button span {
font-size: 60px;
padding: 0px 20px;
}
button.owl-prev {
float: left;
}
button.owl-next {
float: right;
}
.owl-nav {
width: 100vw;
position: absolute;
}
.owl-carousel.owl-theme.owl-loaded.owl-drag {
display: flex;
justify-content: center;
align-items: center;
}

here is my code
for this you need to install bootstrap
code in .HTML file
i used ngx-owl-carousel-o for this
and installed using npm
Owl-carousel-o link
<div class="position-relative">
<owl-carousel-o class="" [options]="customOptions" #owlCar>
<ng-container *ngFor="let slide of slides ">
<ng-template carouselSlide id="slide.id">
<div class="slider">
<img class="hvr-grow-shadow p-2 rounded-4" (click)="getid(slide?.id)" [src]="slide?.image"
[height]="200" alt="slide.alt" title="slide.title">
</div>
</ng-template>
</ng-container>
</owl-carousel-o>
<div class="container-fluid">
<div class=" position-absolute top-50 start-0 translate-middle-y" style="z-index: 1;">
<a class="btn" (click)="owlCar.prev()"><i class="fa fa-angle-left"
style="font-size: xxx-large; color: white;" aria-hidden="true"></i></a>
</div>
<div class=" position-absolute top-50 end-0 translate-middle-y" style="z-index: 1;">
<a class="btn" (click)="owlCar.prev()"><i class="fa fa-angle-right"
style="font-size: xxx-large; color: white;" aria-hidden="true"></i></a>
</div>
</div>
and my code in .ts file is
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 100,
autoplay: false,
center: true,
autoplayHoverPause: false,
// navText: [ '<i class="fa fa-angle-left" aria-hidden="true"></i>',
// '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
740: {
items: 3
},
940: {
items: 4
}
},
// nav: true
}
Hope its Help image in browser

Develop Reference

JavaScript is the programming language of the Web.

Make button under image clickable - javascript

Related

How do transitions work when fading in and out using css classes and javascript

Is it possible to change what happens upon hover to scroll?

How to hide a css class in a specific slider?

html/jquery how to hover div with its child when mouseenter

Owl Carousel 2 Nav on Sides

Categories

Resources