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
Related
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>
This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 2 years ago.
I tried to create an on-hover gif animation in an image block using jquery.js.
I use these animations in horizontal or vertical blocks arranged in a grid of three columns.
When you hover over the block, the gif is launched, a colored form in blend mode is added with a typography over this gif
In my first example everything works fine, but when I wanted to add this code to a page of my website and changed the Z-index so that these elements no longer overlap on top of my menu-wrapper , the gif did not work anymore (second example).
First example :
$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
.grille{
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
}
.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}
.vignette_horizontale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
position:relative;
width:100%;
z-index:95;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.description{
height: 35px;
padding-top: 14px;
font-size: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="gif.js"></script>
<body>
<div id="contenant">
<div class="grille">
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
</div>
</body>
Second example (Edited):
In this second example, the Snippet version work fine but not in my Website page...
I think it's by changing the Z-index values that it doesn't work anymore, but I can't really find if its really that.
$(function () {
$(".playgif").hover(function () {
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
})
});
#loader{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
}
body{
height: auto;
width: 100%;
background: #fff;
}
h1 {
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}
.header_down{
height: 120px;
position: fixed;
width: 100%;
background: #000;
top: 0;
z-index: 104;
transition: all 300ms ease-in-out;
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
height: auto;
z-index: 40;
}
.espacehaut{
height: 120px;
z-index: 1;
}
.colonne1{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne2{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.colonne3{
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
}
.titre_vignette{
font-family: 'Libre Baskerville', serif;
font-size:2vw;
}
.hover_vignettes{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.hover_color{
background:#FF0000;
background-blend-mode: difference;
}
.texte_vignette{
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.informations_vignette{
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_horizontale:hover .hover_vignettes{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_horizontale:hover .texte_vignette{
opacity:1;
margin-top:26%;
}
.vignette_horizontale:hover .informations_vignette{
margin-top:0.5vw;
}
.hover_vignettes_vertical{
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
}
.texte_vignette_verticale{
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
.vignette_verticale:hover .hover_vignettes_vertical{
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
}
.vignette_verticale:hover .texte_vignette_verticale{
opacity:1;
margin-top:55%;
}
.vignette_verticale:hover .informations_vignette{
margin-top:0.5vw;
}
.vignette_horizontale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}
.vignette_horizontale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
.vignette_verticale{
z-index:95;
position:relative;
width:100%;
opacity:1;
}
.vignette_verticale img{
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
}
#navigation-content{
height: 100vh;
width: 100%;
position:fixed;
z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}
.close-first , .close-second{
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
}
.close-first {
transform: rotate(45deg);
}
.close-second{
transform: rotate(-45deg);
}
.navigation-close{
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
}
.navigation-close:hover{
opacity: 1;
transform: rotate(90deg);
}
.logo a{ /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
.logo a:hover{
opacity: 1;
}
.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
}
#keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(0em,0em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(0em,0em) skew(30deg);}
29%,31%,69%,71% {transform: translate(0em,0em) skew(0deg);}
28%,74% { box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width: 30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}
/* transition */
#breaker{
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
}
#keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
#-webkit-keyframes breakeranimate{
0%{ transform : translateX(-150%) rotate(15deg) translateY(-50%);}
50%{ transform : translateX(0%) rotate(15deg) translateY(-50%);}
100%{ transform : translateX(150%) rotate(15deg) translateY(-50%);}
}
#keyframes scale{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}
#-webkit-keyframes breakeranimate{
0%{
transform: scale(.6);
}
100%{
transform: scale(1);
}
}
.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;
}
.cursor{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .5s ease;
}
.cursor-small{
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .4s ease;
}
.icon{
height:40px;
opacity: .8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="all">
<div class="cursor"></div>
<!--loader-->
<!-- <div id="loader">
<img src="src/img/logo.png">
</div> -->
<!--chargement-->
<div id="breaker"> </div>
<div id="breaker-two"> </div>
<!--Navigation- ouverture-->
<div id="navigation-content">
<div class="logo">
<h1>
<a id="name">lookitsgraphic</a>
</h1>
</div>
<div class="navigation-close">
<span class="close-first"></span>
<span class="close-second"></span>
</div>
<div class="navigation-links">
<a href="javascript:setTimeout(()=>{window.location = 'index.html' },800);" data-text="HOME" id="home-link" >HOME</a>
<a href="javascript:setTimeout(()=>{window.location = 'aboutMe.html' },800);" data-text="ABOUT" id="about-link" >ABOUT</a>
<a href="javascript:setTimeout(()=>{window.location = 'projects.html' },800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
<a href="javascript:setTimeout(()=>{window.location = 'portfolio.html' },800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
<a href="javascript:setTimeout(()=>{window.location = 'contact.html' },800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
</div>
</div>
<header class="header_down">
<!--div-->
<h1><a class="logoInit" alt="logo">lookitsgraphic</a>
</h1>
<div class="social-media-links">
<a href="#/" target="_blank">
<img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
</a>
<a href="Tel: #">
<img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
</a>
<a href="mailto: #" target="_top">
<img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
</a>
<a href="#">
<img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
</a>
</div>
<div class="menubar">
<span class="first-span"></span>
<span class="second-span"></span>
<span class="third-span"></span>
</div>
<!--Header Fin-->
</header>
<!--GRILLE-->
<div class="grille">
<div class= "espacehaut"> </div>
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
<!--ALL Fin-->
</div>
<!--Scripts-->
</div>
</body>
My Website page with the gif that do not work.
If any one understand where to fix this problem.
Thank you for your consideration in this matter.
As #disinfor say in comments, there was the message $ is not defined in the console.
I had to change the order of the scripts jquery.js and gif.js and all work fine.
I am trying to show products of a particular category when it is clicked by using jquery ajax i.e without reloading the page.
Now when the products load with Ajax it seems that their CSS is disturbed or maybe some jQuery events not loading. I have checked, all the CSS classes are well placed as in original file and also i ave tried the ".on" method as suggested in some other answers but it doesn't do anything. can you please help me find what the problem is?
original look :
this is what the look should be like
After Ajax loaded content :
and this look is after the ajax loading
all_products.php (original file)
<div class="product_grid">
<div class="product_grid_border"></div>
<div id="prod_container">
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
</div>
</div>
ajax_products.blade.php (to be added via ajax)
#foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div>{{ucwords($product->name)}}</div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
#endforeach
my_js.js
$(document).on('click','.cat',function(){
$.ajax({
url: 'http://localhost/cart_test/user/get_cats',
type: 'POST',
data: { cat : $(this).attr('id')},
success: function(data){
d = JSON.parse(data);
var container = $('#prod_container');
container.empty();
container.append(d);
},
error: function()
{
alert('error');
}
});
});
frontController.php
public function get_cats(Request $request)
{
$id = $request->input('cat');
$products = product::where('category_id','=',$id)->get();
$prods = view('frontend.modules.ajax_products',compact('products'))->render();
echo json_encode($prods);
}
shop.css
.product_grid
{
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
width: calc(100% + 40px);
}
.product_grid_border
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 3px;
height: 100%;
background: #FFFFFF;
z-index: 1;
}
.product_item
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 20%;
background: #FFFFFF;
cursor: pointer;
padding-top: 40px;
padding-bottom: 24px;
text-align: center;
}
.product_border
{
display: block;
position: absolute;
top: 52px;
right: 1px;
width: 1px;
height: calc(100% - 71px);
background: #e5e5e5;
}
.product_image
{
width: 100%;
height: 115px;
}
.product_image img
{
display: block;
position: relative;
max-width: 100%;
}
.product_content
{
width: 100%;
}
.product_price
{
font-size: 16px;
font-weight: 500;
margin-top: 25px;
}
.product_item.discount
{
color: #df3b3b;
}
.product_price span
{
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.6);
margin-left: 10px;
}
.product_price span::after
{
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: '';
}
.product_name
{
margin-top: 4px;
overflow: hidden;
}
.product_name div
{
width: 100%;
}
.product_name div a
{
font-size: 14px;
font-weight: 400;
color: #000000;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_name div a:hover
{
color: #0e8ce4;
}
.product_fav
{
position: absolute;
top: 33px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav:hover
{
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav.active i
{
color: red;
}
.product_item:hover .product_fav
{
visibility: visible;
opacity: 1;
}
.product_marks
{
display: block;
position: absolute;
top: 33px;
left: 24px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_mark
{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.product_new
{
display: none;
background: #0e8ce4;
visibility: hidden;
opacity: 0;
}
.product_discount
{
display: none;
background: #df3b3b;
visibility: hidden;
opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
display: inline-block;
visibility: visible;
opacity: 1;
}
shop.js (this is also not working after ajax)
function initIsotope() {
var sortingButtons = $('.shop_sorting_button');
$('.product_grid').isotope({
itemSelector: '.product_item',
getSortData: {
price: function(itemElement) {
var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
return parseFloat(priceEle);
},
name: '.product_name div a'
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// Sort based on the value from the sorting_type dropdown
sortingButtons.each(function() {
$(this).on('click', function() {
$('.sorting_text').text($(this).text());
var option = $(this).attr('data-isotope-option');
option = JSON.parse(option);
$('.product_grid').isotope(option);
});
});
}
/*
8. Init Price Slider
*/
function initPriceSlider() {
if ($("#slider-range").length) {
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 580],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').on('mouseup', function() {
$('.product_grid').isotope({
filter: function() {
var priceRange = $('#amount').val();
var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');
return (itemPrice > priceMin) && (itemPrice < priceMax);
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
}
}
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);
}
I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?
I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}