Owl Carousel Slider Arrows positioning issue - javascript

I have issue ( I think my code is not structured correctly ) with putting my owl carousel arrows exactly in the left and right side of my .container class. I am not sure how to structure it. Right Now it is working because I put them as position absolute but when I resize for small devices my left and right arrow looks so broken. I want to put them im my container which is 1200 px for desktop devices and I want to position them on the left and right side of the container. Here on the example my left and right controll arrows are missing and I do not have any clue why. I checked a lot of similar issues here and all of them are saying that I have to add my owl custom left and right controllers but when i do it via navText: [].... nothing shows on the screen here on the example.
Here is what I have until now. Any ideas ?
// Owl Carousel Slider
$("#slider").owlCarousel({
nav: true, // Show next and prev buttons
dots: true,
slideSpeed: 300,
paginationSpeed: 400,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsMobile: false,
navText: [
'<img src="https://imgur.com/zTRFaaX" alt="left">',
'<img src="https://imgur.com/zTRFaaX" alt="left">'
]
});
.container {
width: 1200px;
margin: 0 auto;
}
#slider {
position: relative;
}
#slider .item img {
display: block;
width: 100%;
height: auto;
}
.owl-nav {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.owl-dots {
position: absolute;
bottom: 35px;
z-index: 11;
left: 50%;
transform: translateX(-50%);
}
.item div {
position: absolute;
z-index: 11;
top: 60%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0 auto;
width: 50%;
}
.owl-title,
.owl-caption {
font-family: "Arial", sans-serif;
font-size: 70px;
color: #fff;
text-transform: uppercase;
}
.owl-text-slider-1 .owl-title {
margin-bottom: 10px;
}
.owl-text-slider-1 .owl-title:before {
content: "";
width: 52px;
display: block;
position: absolute;
top: -4px;
left: 4px;
}
.owl-caption {
font-size: 51px;
text-align: left;
}
.item .arrow-down {
top: 85%;
width: 38px;
height: 22px;
}
.prev_owl,
.next_owl {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.prev_owl {
top: 50%;
right: 18%;
transform: rotate(180deg);
text-align: center;
}
.next_owl {
top: 50%;
left: 18%;
}
.carousel-caption {
position: absolute;
z-index: 1;
display: table;
width: 100%;
height: 100%;
}
.carousel-caption .slider-content-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.trickcenter {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel-control:hover,
.carousel-control:focus {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css">
<div class="container">
<div id="slider" class="owl-carousel owl-theme">
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080" title="Image" alt="Image">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
<div class="item">
<div>
<div class="owl-text-slider-1">
<h2 class="owl-title">Text 1</h2>
<p class="owl-caption">Text 2</p>
</div>
</div>
<img src="https://via.placeholder.com/1920x1080">
</div>
</div>
<!-- #slider -->
</div>
JSFiddle

Related

JavaScript: How can I make the CSS translate function end up in a given div regardless of where it starts?

I am trying to create a card game but I am stuck at the end point of the Translate function, the player has 30 cards (for programming I only use four since it is easier with less lines), when clicking on a card, the card makes an animation with translate and rotate to reveal the value of the card, and since I only need to reveal the value of 3 cards, I need them to end up in a specific place and be clearly visible, even if the user chooses consecutive cards.
The problem is that I can't make the card end in the div that has the Card1 label, since translate moves me according to the starting point and doesn't to the end point. Can someone help me find a way to do this with translate or is there any other way to do it?
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate{
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2{
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>
<script>
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function () {
card.classList.add('animate');
};
</script>
</body>
</html>

Make html element only visible in one section of page

im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>

I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle

Why my slick slider with indicator not working?

I have a question about slick sliders. I've made a slider with a slick, I want to create an indicator for each slide. I have the code in Codepen, please check.
What I Want
When I was on the first slide, the active border was on the slider 1 indicator, when I was on slide 2 the indicator was on the slider 2 indicator as below.
I've been looking for several ways but still nothing I can use. if you know how, please help me. Because I don't know how to make custom indicators like that. I need your help please.
HTML
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",
nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});

Check out this snippet:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
}
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active, .slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>

Sidebar Push Content

I have been trying to move my content div to the left when triggering the menu toggle, ideally without a jump but a push transition. The content div should only slide aside the width of the open sidebar. The following code keeps the sidebar icon always in view, which is what I want, but overlays the content div. What would I need to add to the JQuery function & CSS in order to achieve this?
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
#side {
position:absolute;
right:100%;
width: 50px;
height: 50px;
z-index: 1000000;
color:black;
}
#slidable {
position: fixed;
top:0;
height: 100vh;
background: black;
width: 200px;
left: 100%;
transition: 0.4s;
z-index: 1000000;
color:black;
text-align:center;
font-size:25px;
font-weight: 300;
color:white;
}
#slidable.open{
left: calc(100% - 200px);
}
.fa {
font-size:30px!;
margin-top:25px;
color:black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable">
<div id="side" class="icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content">
<p>hallo</p>
</div>

i did add this:
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
And i do refactored to use CSS classes as selectors in the Stylesheet.
jQuery(function($) {
$("#side").click(function() {
$('#slidable').toggleClass("open");
});
})
.side {
position: absolute;
right: 100%;
width: 50px;
height: 50px;
z-index: 1000000;
color: black;
}
.slidable {
position: fixed;
top: 0;
height: 100vh;
background: black;
width: 200px;
right: 0;
transition: 0.4s;
z-index: 1000000;
color: black;
text-align: center;
font-size: 25px;
font-weight: 300;
color: white;
}
.slidable.open{
right: 200px;
}
.content {
position: relative;
left: 0;
transition: left 0.4s;
}
.slidable.open + .content{
left: -200px;
}
.fa {
font-size: 30px;
margin-top: 25px;
color: black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slidable" class="slidable">
<div id="side" class="side icon">
<i class="fa fa-bars"></i>
</div>
<div>
<p>Link 1</p>
<p>Link 2</p>
<p>Link 3</p>
<p>Link 4</p>
<p>Link 5</p>
</div>
</div>
<div id="content" class="content">
<p>hallo, give me just a bit more content here</p>
</div>

Fader Differ from Div

so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}

this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.

Categories

Resources