I wanted to have such a slider and decided to use slick slider center mode. but it doesn't work at all. i'm a bit newbie and can't make heads or tails of it.
here is what I made. I studied many examples but couldn't debug my codes.
would be grateful if someone help me.
$('.mainslider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
.wrapper {
margin: 10px auto;
width: 70%;
border: 2px solid #707070;
border-radius: 50px;
}
.slide {
width: auto;
height: 600px;
margin: 20px 20px;
padding: 10px;
position: relative;
background-size: cover;
background-position: bottom;
border-radius: 50px;
border: 0px solid #707070;
}
<div class="mainslider">
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
<div class="wrapper"><div class="slide" style="background-image: url('https://images.theconversation.com/files/295442/original/file-20191003-52796-1763ajl.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=900.0&fit=crop');"></div></div>
</div>
Related
My dropdown menu is not clickable. Like if I want to go to a different page, it wont let me click it. Can someone please help me on what to do here?
This is my htm and css
`<h2>Laura Deleon</h2>
</div>
<ul class="nav-links">
<li>Photography</li>
<li>Films</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
<div class="carousel-container">
<figure class="carousel-slide snaps-inline">
<img src="images/IMG_7068.jpg">
<img src="images/IMG_7067.jpg">
<img src="images/IMG_7069.jpg">
<img src="images/IMG_7070.jpg">
<img src="images/IMG_7072.jpg">
<img src="images/IMG_3123 (1).jpg">
<img src="images/IMG_3124.jpg">
<img src="images/IMG_3125 (1).jpg">
<img src="images/IMG_3572.jpg">
<img src="images/IMG_3128.jpg">
<img src="images/IMG_3126 (1).jpg">
<img src="images/IMG_2650 (1).jpg">
<img src="images/img5.jpg">
<img src="images/img3.jpg.jpg">
<img src="images/img13.jpg.jpg">
<img src="images/img18.jpg.jpg">
<img src="images/img9.jpg">
<img src="images/img1.jpg">
<img src="images/IMG_1382.jpg">
<img src="images/img19.jpg">
</figure>
`
I made put the dropdown to go over the pictures to see if that worked but nothing.The dropdown is for when the page is shrinked and for mobile. I tried it on my phone and I cant click on the other pages
`/*start navbar*/
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 10vh;
}
.nav-links {
display: flex;
width: 40%;
justify-content: space-around;
}
.nav-links li{
list-style: none;
background-color: rgba(255, 255, 255, 0.5);
}
.nav-links a{
list-style: none;
text-transform: none;
letter-spacing: 3px;
line-height: 25pt;
}
/*end navbar*/
/*start burger*/
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 1px;
background-color: black;
margin: 5px;
transition: 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 55%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 95vh;
top: 8vh;
display: inline-block;
flex-direction: column;
justify-content: center;
width: 20%;
transform: translateX(0px);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0
}
.burger {
display: block;
}
#fas1,
#fas2 {
display: none;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade{
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*end burger*/
/*start picture carousel home*/
img {
width: 700px;
height: 700px;
object-fit: contain;
margin: 10px;
z-index: -1;
}
.carousel-slide {
display: grid;
gap: var(--size-3);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
position: relative;
}`
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
JSFiddle
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
Easy, tiny and tidy.
document.querySelectorAll('.swiper-container').forEach(function(elem) {
new Swiper(elem, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: elem.nextElementSibling.nextElementSibling,
prevEl: elem.nextElementSibling,
}
});
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i++) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
JSFiddle
Another way for anyone that might find it useful. Pass in count as a props with a different value for each slider. I did count="1" and count="2". This gives each sliders navigation arrows a different class so they will work independently of each other
<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>
props: ['count'],
data() {
return {
swiperOption: {
slidesPerView: 'auto',
spaceBetween: 45,
grabCursor: true,
centerInsufficientSlides: true,
navigation: {
nextEl: `.swiper-button-next-${this.count}`,
prevEl: `.swiper-button-prev-${this.count}`
}
}
}
.swiper-container {
width: 100%;
height: 400px;
padding: 0 50px;
}
.swiper-container::before{
content: "";
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
.swiper-container::after{
content: "";
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
height: 400px;
width: 40px;
z-index: 9;
}
I'm developing a website where I have to put a bootstrap carousel and different texts over this carousel (absolute element).
Once I put the carousel on the website, all the texts become blurry and difficult to read.
I've read the could a problem between z-index of the text and z-index of the carousel but I'm not getting how I can solve it because I have to keep this text over the carousel.
Here the image of what I'm developing:
Here my code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container">
<ul>
<li>UK 33333</li>
<li>IRELAND 333333</li>
<li>CANADA 333333</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="logo-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a>
</div>
</div>
<nav class="main_menu_container">
<ul class="main_menu_class">
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Policies</li>
<li>Contact us</li>
</ul>
</nav>
<div class="slide-title-blue-wrap">
<div class="slide-title-blue-container">
<span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-red-wrap">
<div class="slide-title-red-container">
<span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-green-wrap">
<div class="slide-title-green-container">
<span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
</div>
CSS
.top-header-container {
text-align: right;
position: relative;
z-index: 2;
}
.top-header-container > ul {
margin: 0;
padding: 0;
}
.top-header-container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
font-size: 13px;
}
.main_menu_container {
text-align: right;
position: absolute;
width: 58%;
right: -110px;
top: 55px;
}
.main_menu_container > ul {
margin: 0;
padding: 0;
padding-right: 150px;
background: #76bd21;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.main_menu_container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.main_menu_container > ul > li > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.main_menu_container > ul > li > a:hover {
text-decoration: none;
}
.logo-wrap {
position: relative;
margin-top: -835px;
margin-left: -35px;
}
.logo-container {
position: absolute;
left: -450px;
background: rgba(255, 255, 255, 0.82);
height: 800px;
width: 50%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.navbar-brand {
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.logo-img {
position: absolute;
left: 110px;
top: 40px;
}
.background-img-slide {
position: relative;
margin-top: -100px;
background-image: url(assets/img/image-home-main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 850px;
}
.slide-title-blue-wrap {
position: relative;
}
.slide-title-blue-container {
position: absolute;
left: -689px;
top: -7px;
background: rgba(5, 34, 162, 0.85);
height: 700px;
width: 60%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
z-index: 15;
}
.slide-title-blue {
position: absolute;
top: 70%;
left: 65%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
color: #fff;
}
.slide-title-green-wrap {
position: relative;
}
.slide-title-green-container {
position: absolute;
left: -881px;
top: 835px;
background: rgba(118, 189, 33, 0.85);
height: 800px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 10;
}
.slide-title-red-wrap {
position: relative;
}
.slide-title-red-container {
position: absolute;
left: -410px;
top: 693px;
background: rgba(5, 34, 162, 0.85);
height: 142px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 15;
}
.slide-title-red {
position: absolute;
top: 40%;
left: 50%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
color: #fff;
}
Blurry text (with carousel)
Clear text (without carousel)
Here link of my test website:
http://www.matrix-test.com/roofing/
Any Idea to solve this problem?
I've been able to resolve this issue in Bootstrap 4 by setting the backface-visibility attribute of the carousel-item to unset.
Here's the code.
.carousel-item {
-webkit-backface-visibility: unset!important;
backface-visibility: unset!important;
}
I followed this http://codepen.io/redfrost/pen/dbrgk codepen working gallery snippet to the tee . Everything works as far as functionality but there is a background coming from a bootstrap class that makes the gallery wider than expected. The arrows according to the snippet should be contained within the image div itself.
I have deleted both style sheets just to see if the background would go away and it did not. It is a bootstrap class issue.
Here is the image of the issue http://postimg.org/image/mmdbsl6sp/full/
I think the class causing the issue is class="carousel-inner"
Here is the markup I have for the gallery:
#extends('layouts.main')
#section('content')
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 1</h3>
</div>
<div class="span8"><p>Picture 1 details</p>
</div>
</div>
</div><!-- /Slide1 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 2</h3>
</div>
<div class="span8"><p>Picture 2 details</p>
</div>
</div>
</div><!-- /Slide2 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 3</h3>
</div>
<div class="span8"><p>Picture 3 details</p>
</div>
</div>
</div><!-- /Slide2 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
#stop
Here is the css:
div { word-break: break-all; }
img {
max-width:100%;
display: block;
margin-left: auto;
margin-right: auto;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
text-decoration: none;
}
/* Container */
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 20px 0px;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.caption .span4, .caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
zoom: 7;
color: #ff3333;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer, .footer a {
color: #fff;
}
p.right {
float: right;
}
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}#media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }