When I am adding swiper to my HTML the CSS is messed up it is not properly functional.
the margin from the container is disabled after adding the swiper. here is my HTML and JS code:-
let swiper = new Swiper('.portfolio_container', {
cssMode: true,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.0/swiper-bundle.min.js"></script>
<h2>Portfolio</h2>
Most recent work
<div class="portfolio_container container swiper">
<div class="swiper-wrapper">
<!-- ==================PORTFOLIO 1 ============ -->
<div class="porfolio_content grid swiper-slide">
<img src="img/portfolio1.jpg" alt="" class="portfolio_img">
<div class="portfolio_data">
<h3 class="portfolio_title">Modern Websites</h3>
<p class="portfolio_description">Websites adaptable to all devices, with UI components and animated interactions. </p>
Demo<i class="uil uil-arrow-right button_icon"></i></div>
</div>
<img src="img/portfolio3.jpg" alt="" class="">
<h3>Online Store</h3>
<p>Websites adaptable to all devices, with UI components and animated interactions. </p>
Demo<i></i>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next ">
<i class="uil uil-angle-right-b swiper-portfolio-icon "></i>
</div>
<div class="swiper-button-prev ">
<i class="uil uil-angle-left-b swiper-portfolio-icon "></i>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination "></div>
To add a swiper slide to my portfolio section
Related
i start to learn about Web and make example page
i use swiper in javascript and that swiper is work, but all slide exhibit when that slide does not in center.
what attribute need to code?
Actual page
and this my js page
new Swiper('.notice-line .swiper-container', {
direction: 'vertical',
autoplay: true,
loop: true
});
html page
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트
</div>
<div class="swiper-slide">
스타벅스커피 코리아 애플리케이션 버전 업데이트 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 뉴이어 전자영수증 이벤트
</div>
</div>
</div>
<a href="javascript:void(0)" class="notice-line__more">
<div class="material-icons">
<span class="material-symbols-outlined">add_circle</span>
</div>
</a>
</div>
I am trying to make an automatic notification cards, the card should slid in from the right of the screen with animation the second card will slid in the same way and push the previous card down, exactly like this website https://muzzleapp.com/
i have tried to create it with swiperjs but i cant animate the card to slide in from the left and the auto play of the carousel is not like the one in the website https://muzzleapp.com/
here is my code
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
reverseDirection: true,
loop: true,
slidesPerView: 6,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
and this is the html
<div class="col-lg-5">
<img class="main-img" src="./Assest/Group 14.png" alt="">
</div>
<div class="col-lg-3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column mt-3">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info" class="card-info">Aiseh new PS5 ah, swee ah bro. But now
pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
any one has a better way for me to reach my goal please ,,,, thank you
I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.
Use Flickity Slider, it's a much better slider plugin.
I would like to implement the loop:true option in my owl carousel, but actually when I overwrite the old owl.carousel.min file the entire slider disabled, but it works fine with old version owl.carousel.min file without loop.
Can anyone help me how to overcome from this one.
$("#owl-example4").owlCarousel({
navigation : true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
autoPlay: 3500, //Set AutoPlay to 3 seconds
autoplayTimeout:2500,
items :1,
loop: true,
singleItem: true,
autoHeight: true,
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
});
html as follows
<section class=".banner" id="banner"><!--main-section banner-->
<div id="owl-example4" class="owl-carousel fadeInRight animated wow">
<div class="item darkCyan text-center hpsliderimg1">
<img src="img/slide1.jpg" class="img-responsive center-block"/>
</div>
<div class="item darkCyan text-center hpsliderimg2">
<img src="img/slide2.jpg" class="img-responsive center-block"/>
</div>
<div class="item darkCyan text-center hpsliderimg3">
<img src="img/slide3.jpg" class="img-responsive center-block"/>
</div>
<!--<div class="item darkCyan text-center hpsliderimg4">
<img src="img/slide-4.jpg" class="img-responsive"/>
</div>-->
</div>
</section>
I am trying to create a content slider same as here the only thing is that they have text and images and i want only images.
Basically on first page it shows thumbnails so when you click any of them it jumps to that particular slide.
I have tried and setup the slider with swiper jquery plugin but i couldn't make it to jump to specific slide here is my code:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)">
<div class="block">
Jumo to page 1
</div>
<div class="block">
Jumo to page 2
</div>
<div class="block">
Jumo to page 3
</div>
</div>
<div id="page2" data-page-number="2" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)"></div>
<div id="page3" data-page-number="3" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
<div id="page4" data-page-number="4" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
<div id="page5" data-page-number="5" class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
<div id="page6" data-page-number="6" class="swiper-slide"><h1>THIS IS PAGE 6</h1></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade'
});
</script>
Jsfiddle here https://jsfiddle.net/yuv72u60/
Seeking help!
Thank you
HTML
<div class="block">
Jumo to page 1
</div>
<div class="block">
Jumo to page 2
</div>
<div class="block">
Jumo to page 3
</div>
JS
$(".block a").click(function(){
var index=$(this).attr('href');
swiper.slideTo(index);
});
The above mentioned are changes in have made to your JS fiddle in the HTML and JS section. index in the above js is the position of your page.
DEMO
There is an API in Slider itself for your requirement I have updated your Fiddle slightly for that API to work