I created two sliders using swiper.js in react. The css rules for both the sliders are different and had to target same css classes that library provided. When I integrate both the components in react, css conflict happens. How do I resolve this ?
eg: 1st component slider css rule
.swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
2nd component slider css rule
.swiper-container {
max-width: 500px;
border-radius: 15px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
}
The 2nd component css rule will override the first component css rule which I dont want that happen
Any way to solve this ?
what you can do is adding a container class for each slider and use that container class to prefix your css rules.
as an example:
// import Swiper core and required components
import SwiperCore, {A11y, Navigation, Pagination, Scrollbar} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';
// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
export default () => {
return (
<>
<div className="container-1">
<Swiper
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{clickable: true}}
scrollbar={{draggable: true}}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</div>
<div className="container-2">
<Swiper
spaceBetween={50}
slidesPerView={3}
navigation
pagination={{clickable: true}}
scrollbar={{draggable: true}}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
...
</Swiper>
</div>
</>
);
};
CSS
.container-1 .swiper-container {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 150px;
}
.container-2 .swiper-container {
max-width: 500px;
border-radius: 15px;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 16px;
margin-left: 0;
margin-right: 0;
}
You don't need to use same class for multiple component.
Do like this to void conflicts.
.s1 for first swiper slider and .s2 for second one.
var s1 = new Swiper('.s1', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp1',
paginationClickable: true,
});
var s2 = new Swiper('.s2', {
slidesPerView: 4,
spaceBetween: 10,
pagination: '.sp2',
paginationClickable: true,
});
.s1 {
background: pink;
margin-bottom: 30px;
}
.s2 {
background: lime;
}
.swiper-slide {
border: 1px solid #115599;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<div class="swiper-container s1">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp1"></div>
</div>
<!-- Swiper -->
<div class="swiper-container s2">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination sp2"></div>
Related
I have a Swiper but can't resize the navigation arrows for some reason.
.swiper-button-next,
.swiper-button-prev {
color: white !important;
fill: white !important;
stroke: white !important;
width: 10px !important;
height: 10px !important;
}
It does not matter what values I give, the arrows stay the same.
An easy and straightforward solution is to remove the default arrows and use custom ones. To do so, you need:
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
And then have for example an icon for each controller like so:
<div class="swiper-button-next">Custom</div>
<div class="swiper-button-prev">Custom</div>
Here is a working live demo to get an idea:
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
html,
body {
height: 100%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
display: grid;
place-items:center;
}
.swiper-button-prev:after,
.swiper-button-next:after {
display: none;
}
i{
color:crimson;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<div class="swiper mySwiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"><i class="fa-solid fa-circle-chevron-right fa-2x"></i></div>
<div class="swiper-button-prev"><i class="fa-solid fa-circle-chevron-left fa-2x"></i></div>
</div>
I'd like to add padding to the slide, Swiper offers the parameter spaceBetween for outside the slide ( the wrapper gap ). Now I need padding inside the slide, I've tried adding the padding to .swiper-slide but it broke the whole structure of the swiper.
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 300px;
height: 150px;
background-color: gray;
}
.swiper-slide {
padding: 15px;
background-color: green;
color: white;
}
<div class="swiper">
<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>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
you should give padding and box-sizing: border-box; to your .swiper-slide
do this :
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 2,
spaceBetween: 30
});
.swiper {
width: 100%;
height: 150px;
background-color: gray;
}
.swiper-slide {
background-color: green;
position:relative;
color: white;
padding:20px;
box-sizing: border-box;
}
.padding{
max-width:100%;
background:red;
}
.swiper-wrapper{
width: 100%;
height: 100%;
}
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="padding">Slide 1</div>
<div>example 1</div>
<div>example 2</div>
<div>example 3</div>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
I'm trying to disable partial / half slides which show on the left and right of Swiper. I want it to show only full slides and not any incomplete slides
var swiper = new Swiper(".swiper-container", {
slidesPerView: 'auto',
preventClicksPropagation: false,
loop: true,
slidesPerGroup: 1,
loopPreventsSlide: false,
centeredSlides: true,
centeredSlidesBounds: true,
setWrapperSize: true,
spaceBetween: 20,
// init: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
This is my html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card-content">Hello</div>
</div>
</div>
</div>
</div>
Here is a code example that does what I believe you are looking for:
new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 5,
centeredSlides: true,
spaceBetween: 30,
loop: true,
loopedSlides: 7,
watchSlidesVisibility: true,
breakpoints: {
1028: {
slidesPerView:3,
spaceBetween: 30,
},
480: {
slidesPerView:1,
spaceBetween: 10,
}
}
});
html, body {
position: relative;
height: 100%;
}
body {
background: blue;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
padding: 4em 0;
}
.container{
margin: 0 auto;
height: 100%;
padding: 0 4em;
overflow: hidden;
}
.slider-wrap {
overflow: hidden;
height: 100%;
width: 100%;
background: red;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
opacity: 0;
}
.swiper-container {
overflow: visible;
}
.swiper-slide-visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
All credit to Fabian's codepen here:
https://codepen.io/bitpunk/pen/ZEGmBom
I modified this codepen to meet your needs.
I'm creating a vertical slider and I need to have one slide bigger than the others. I usually use Flickity but as it doesn't support Vertical slides, I'm using Swiper.js.
The thing is every row should be the same size but that's not my case. What I've done is to create a cell that is 2x the size of a normal slide, and then track if I'm going to slide to that cell, then move two slides, so I skip one that it's not used.
The problem is that the last one is hidden. I've added one extra and then hidden the last one. I know it's a very tricky solution.
I think there might be better ways so I wanted to ask if you think my solution could be emproved? I attatch you the code:
https://codepen.io/scros/pen/LYVJKrQ
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
slidesPerView: 4,
spaceBetween: 15,
// slidesPerGroup: 2,
cssMode: true,
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
console.log(swiper.params);
swiper.on("slideNextTransitionStart", function() {
console.log("slide changed");
console.log(swiper.activeIndex);
if (swiper.activeIndex === 1) {
swiper.slideTo(2, 700);
}
});
swiper.on("slidePrevTransitionStart", function() {
console.log("slide changed");
console.log(swiper.activeIndex);
if (swiper.activeIndex === 1) {
swiper.slideTo(0, 700);
}
});
.swiper-container {
width: 600px;
height: 500px;
overflow: hidden;
}
.swiper-slide {
border-radius: 0.3rem;
font-size: 18px;
color: white;
background-color: #8ec5fc;
background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
display: flex;
justify-content: center;
align-items: center;
}
.slide1 {
padding: 4rem 0;
}
.wrapper {
background-color: #eef2f7;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>
<div class="wrapper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<h1>Big Slide</h1>
</div>
<div class="swiper-slide slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide"></div>
</div>
</div>
</div>
Thanks!
I have a requirement to create a News section on a webpage (it's SharePoint, but that's probably not terribly relevant) which looks something like the image below.
My issue is that HTML will be dynamically generated from a list of the news items, so the code for each item will be the same - ie. I don't think I can add code to differentiate between the left hand column item and the right hand column items.
The code is formatted with handlebars.js, but the lack of logic there seems to prevent me from doing it there?
So using a simple {{#each items}} in the handlebars, I end up with something like this:
<div class="newsContainer">
<div class="newsItem">
<img src="image1"/>
<div class="newsTitle">Headline 1</div>
<div class="newsSummary">Summary 1</div>
</div>
<div class="newsItem">
<img src="image2"/>
<div class="newsTitle">Headline 2</div>
<div class="newsSummary">Summary 2</div>
</div>
<div class="newsItem">
<img src="image3"/>
<div class="newsTitle">Headline 3</div>
<div class="newsSummary">Summary 3</div>
</div>
<div class="newsItem">
<img src="image4"/>
<div class="newsTitle">Headline 4</div>
<div class="newsSummary">Summary 4</div>
</div>
</div>
So my challenge is to create the layout below from the code above using either just CSS, or CSS and JavaScript.
I've made limited progress with ":first-of-type", but I'm wondering if something like FlexBox may be another option?
Thanks!
You can archieve the desired layout by using floating divs. I wrote a little example for you.
I didn't edit any of the HTML you provided. So you could just copy and paste the CSS from below.
See below snippet.
* {
box-sizing: border-box;
}
/**
This is a clearfix. Floated divs have to be cleared, else the layout will mess up
*/
.newsContainer::before,
.newsContainer::after,
.newsContainer .newsItem::before,
.newsContainer .newsItem::after {
display: table;
content: " ";
clear: both;
}
.newsContainer .newsItem {
float: left;
}
.newsContainer .newsItem:first-child {
width: 50%;
}
/**
Margin-left 5% acts as spacing
Put all divs near the first child, except :first-child using CSS :not() selector
*/
.newsContainer .newsItem:not(:first-child) {
width: 45%;
margin-left: 5%;
}
/**
Overwrite above CSS, now set float right on the 4th and 5th divs. You can add
more divs `.newsItem:nth-child(6) ... etc` if more divs are present.
Set margin left value same as .newsContainer .newsItem:first-child width
*/
.newsContainer .newsItem:nth-child(5) {
float: right;
margin-left: 50%;
}
/**
This is just for responive images
*/
.newsContainer .newsItem img {
max-width: 100%;
max-height: 100%;
}
.newsContainer .newsItem .newsTitle > a,
.newsContainer .newsItem .newsSummary {
color: #969696;
}
.newsContainer .newsItem .newsTitle > a {
font-size: 28px;
text-decoration: none;
}
.newsContainer .newsItem .newsSummary {
font-size: 16px;
}
.newsContainer .newsItem > div {
padding: 0 15px 15px;
}
.newsContainer .newsItem:not(:first-child) > * {
float: left;
width: 50%;
}
<div class="newsContainer">
<div class="newsItem">
<img src="https://via.placeholder.com/600x500"/>
<div class="newsTitle">Headline 1</div>
<div class="newsSummary">Summary 1</div>
</div>
<div class="newsItem">
<img src="https://via.placeholder.com/200x200"/>
<div class="newsTitle">Headline 2</div>
<div class="newsSummary">Summary 2</div>
</div>
<div class="newsItem">
<img src="https://via.placeholder.com/200x200"/>
<div class="newsTitle">Headline 3</div>
<div class="newsSummary">Summary 3</div>
</div>
<div class="newsItem">
<img src="https://via.placeholder.com/200x200"/>
<div class="newsTitle">Headline 4</div>
<div class="newsSummary">Summary 4</div>
</div>
<div class="newsItem">
<img src="https://via.placeholder.com/200x200"/>
<div class="newsTitle">Headline 5</div>
<div class="newsSummary">Summary 5</div>
</div>
</div>
You can create your own columnar layout to achieve this:
.newsContainer {
width: 100%;
}
.col {
position: relative;
float: left;
width: 50%;
}
<div class="newsContainer">
<div class="col">
<div class="newsItem">
<img src="image1" />
<div class="newsTitle">Headline 1</div>
<div class="newsSummary">Summary 1</div>
</div>
</div><!--End Col 1-->
<div class="col">
<div class="newsItem">
<img src="image2" />
<div class="newsTitle">Headline 2</div>
<div class="newsSummary">Summary 2</div>
</div>
<div class="newsItem">
<img src="image3" />
<div class="newsTitle">Headline 3</div>
<div class="newsSummary">Summary 3</div>
</div>
<div class="newsItem">
<img src="image4" />
<div class="newsTitle">Headline 4</div>
<div class="newsSummary">Summary 4</div>
</div>
</div><!--End Col 2-->
</div>