i have created slider using swiper js. i have achieved layout using css. but issue when i tried to give transition on image doesnt give proper effect of transition
i have created slider using swiper js .. but the isssue is when i add transition to slider then transition not working properly here the my code
swiper js
swiper css
<head>
<style>
.swiper-container {
width: 100% !important;
overflow: hidden;
}
.swiper-slide-active {
width: 87.5% !important;
}
.swiper-slide-next,
.swiper-slide-next+.swiper-slide {
width: 5% !important;
text-align: center;
transition: none;
}
.swiper-slide img {
max-width: 100%;
height: 400px;
object-fit: cover;
border-radius: 5px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
content: none;
}
.swiper-button-prev {
left: -7px;
}
.swiper-button-next {
right: -7px;
}
.swiper-button-next,
.swiper-button-prev {
align-items: center;
width: 40px;
height: 40px;
cursor: pointer;
background: #ffffff;
box-shadow: 2px 4px 8px rgb(0 0 0 / 6%);
border-radius: 50%;
border: 1px solid #f0f0f0;
color: #000;
}
/* .swiper-slide {
transition: all 0.6s ease-in-out;
} */
.swiper-slide {
transition: all 0.6s ease-in-out;
}
#media(max-width: 640px) {
.swiper-slide-next,
.swiper-slide-next+.swiper-slide {
width: 10% !important;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Swiper js with animation</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div><img src="images/img2.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img3.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img4.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img5.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img6.webp" alt=""></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"
integrity="sha512-wdUM0BxMyMC/Yem1RWDiIiXA6ssXMoxypihVEwxDc+ftznGeRu4s9Fmxl8PthpxOh5CQ0eqjqw1Q8ScgNA1moQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
loop: true,
slidesPerGroup: 1,
watchSlidesProgress: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// Add cubic bezier animation
transition: {
duration: 6000,
easing: 'cubic-bezier(0.93, 0.24, 0.74, 0.6)',
runCallbacks: true
},
});
var prevButton = document.querySelector('.swiper-button-prev');
prevButton.innerHTML = '<i class="fa-solid fa-chevron-left"></i>';
var nextButton = document.querySelector('.swiper-button-next');
nextButton.innerHTML = '<i class="fa-solid fa-chevron-right"></i>';
</script>
</body>
i want slider something like this using swiper js ridibooks.com/webtoon/recommendation this is just for reference here's the my code codepen.io/sapnas/pen/xxJXmBm
The SwiperJS transition we have hopefully solved at this codepen example.
You still need to refine your code further to suit your specific goal.
codepen example.
Bootstrap: we attempted to duplicate it as well (set to 'col-md-6 col-lg-4') but the bootstrap version was not known in your post.
Some of the code used will not be needed in your further refinements (i.e. CSS .bk1).
In SwiperJS version #8 some minor script code has changed from .swiper-container to just .swiper and these differences may be causing part of your error.
<script>
var swiper = new Swiper('.swiper', {
slidesPerView: 3, ....
</script>
I have Refresh ADS on sidebar every 30 seconds. The sidebar content is jumping – pls check on video - https://www.screencast.com/t/xCUxDrRx4BFf
Our different ads unit size is - 250250, 300250, 336*280
<style>
.aspect-ratio-box::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 591.44px / 1127.34px * 100%;
}
.aspect-ratio-box::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="aspect-ratio-box">
<div style="border:1px solid black;width: 300px;">
<center><div id='xxxxxxxxxxx'>
<script>
googletag.cmd.push(function() { googletag.display('xxxxxxxxxxx'); });
</script>
</div></center>
<br/>
<center><div id='xxxxxxxxxxx'>
<script>
googletag.cmd.push(function() { googletag.display('xxxxxxxxxxx'); });
</script>
</div></center>
</div>
</div>
Is there any way to fix the issue?
so sidebar content will not jumping.
Issue URL is - https://www.test2.guru99.com/software-testing.html
I am new to jQuery. I have a requirement of drag and drop where i got '3 draggable div' with id 'parent1, parent2 and parent3' to be dropped in a "container div drop-parent".
Scenario:
When i drag the div with id 'parent1' on container div 'drop-parent' it get dropped but when i choose 'parent 2' div to drop it isn't able to replace the div 'parent1' and to come at its inital position. Please refer below JSBin link for same [click here]
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$this.droppable("disable").css('opacity',0.9);;
if($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({'left': '0px', 'top': '0px'});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png"/></div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3><img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png"/></div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px"/>
</div>
</div>
</body>
</html>
I've edited the Dropped() function so that it moves all old elements that where on the body back to their parent and then adds the new one.
$(".child").draggable({
revert: "invalid",
containment: ".drag_drop_container"
});
$('.drop-parent').droppable({
accept: ".drag-parent > .child",
drop: function(event, ui) {
Dropped($(this), ui.draggable.click());
}
});
$('.drag-parent').droppable({
accept: function(draggable) {
if ($(this).attr('id').split('parent')[1] == draggable.attr('data-id')) {
return true;
}
},
drop: function(event, ui) {
Reverted($(this), ui.draggable.click());
}
});
function Dropped($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
if ($item.parent().hasClass('drop-parent')) {
$item.parent().droppable("enable");
} else {
$('.text-input').val($item.attr('data-id'));
}
for (i = 0; i < $this.children().length; i++) {
$oldElement = $($this.children()[i]);
$("#parent" + $oldElement.data("id")).append($oldElement);
}
$this.append($item);
$this.sortable();
}
function Reverted($this, $item) {
$item.css({
'left': '0px',
'top': '0px'
});
$item.parent().droppable("enable");
$this.append($item);
$('.droped_val').val('');
}
.drop-parent {
//border: 1px solid red!important;
/* background-color: red; */
//width: 640px; /*can be in percentage also.*/
height: 42px;
width: 100px;
//margin: 0 auto;
left:-4px;
//padding: 10px;
top:184px;
position: relative;
}
.dragbody {
//border: 1px solid blue!important;
/* background-color: red; */
//width: 281px;
//position: relative;
//height: 53px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag1.js"></script>
<script src="https://emea.focusvision.com/survey/selfserve/2140/190505/drag2.js"></script>
</head>
<body>
<div class="drag_drop_container">
<div class="cards">
<table align="center" class="Table1">
<tr>
<td>
<div class="drag-parent" id="parent1">
<div class="child" data-id=1>
<img data-parent-id="1" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/happy.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent2">
<div class="child" data-id=2>
<img data-parent-id="2" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/neutral.png" />
</div>
</div>
</td>
<td>
<div class="drag-parent" id="parent3">
<div class="child" data-id=3>
<img data-parent-id="3" src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/sad.png" />
</div>
</div>
</td>
</tr>
</table>
</div>
<div align="center" class="dragbody">
<div align="center" class="drop-parent">
</div>
<img src="https://singapore.decipherinc.com/survey/selfserve/54e/200701/body.png" width="250px" />
</div>
</div>
</body>
</html>
geeks! It's probably simply question.. but how can I remove this 'white line' or 'gap' between two divs in the same color?
It's only problem when I have the same background color in the divs. It's not visible when I pick other color. You can see this gap while scrolling.
I was trying to manage with background-color and border but it doesn't works for me or I am doing something wrong..
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow:hidden;
vertical-align: middle;
background-color: #f2f2f2;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#sec1, #sec2{
background-color: #ac2022;
}
.section{
text-align: center;
align-items: center;
justify-content: center;
vertical-align: middle;
position: relative;
color: #fff;
}
body{
background-color: transparent;}
.fp-section {
position: relative;
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
}
.fp-slide {
float: left;
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block;
}
.fp-slides {
z-index:1;
height: 100%;
overflow: hidden;
vertical-align: middle;
position: relative;
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-slidesContainer {
float: left;
position: relative;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important;
}
/*Only display content to screen readers*/
.fp-sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<script src="https://cdn.jsdelivr.net/npm/fullpage.js#3.0.8/dist/fullpage.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="website description...">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="fullpage">
<div id="p1" class="page-section section">
<div class="slide" id="sec1" data-anchor="slide1">
<img src="" data-src="" />
<h3>Section 1</h3>
<p class="view-more">See more</p>
</div>
</div>
<div id="p2" class="page-section section">
<div class="slide" id="sec2" data-anchor="slide1">
<img src="" data-src="" />
<h3>Section 2</h3>
<p class="view-more">See more</p>
</div>
</div>
<div id="p2" class="page-section section">Some section</div>
<div id="p3" class="page-section section">Some section</div>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['01', '02', '03', '04', '05', '06',],
showActiveTooltip: true,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: true,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: false,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: 0,
paddingBottom: 0,
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
cards: false,
cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(origin, destination, direction){},
afterLoad: function(origin, destination, direction){},
afterRender: function(){},
afterResize: function(width, height){},
afterReBuild: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(section, origin, destination, direction){},
onSlideLeave: function(section, origin, destination, direction){}
});
</script>
</body>
</html>
I am offically stumped. There is obvioulsy an easy solution for this, but maybe I just can't see it.
Basically I have a content div with 2 main divs—leftSide and rightside—which I want to display inline. Each side contains other divs. No matter what I try the rightSide div always resorts to displaying under the leftSide div.
HTML
<div id="leftSide">
<h6>MERCHANDISE</h6><img src="images/merch.gif" height="220" width="330" border="0" alt="Organ Thieves - Merch Slideshow"/>
<div id="twitter">
<div class=hr></div>
<h6>FOLLOW US</h6>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 330,
height: 250,
theme: {
shell: {
background: '#525252',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#b51d1d'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('OrganThieves').start();
</script>
</div><!--end of twitter-->
</div><!--endof leftside-->
<div id="rightSide">
<div id="gigs">
<script type="text/javascript">
var bcGigWidgetWidth=500;
var bcGigWidgetMaxHeight=500;
var bcGigWidgetBackgroundColor="333333";
var bcGigWidgetTextColor="ffffff";
var bcGigWidgetLinkColor="eaeaea";
var bcGigWidgetLineColor="7d7058";
</script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/javascripts/giglistings.js"></script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/gigs/export.js"></script>
</div><!--end gigs-->
</div><!--end of rightSide-->
</div><!--end content-->
CSS
#content{
position: relative;
width: 900px;
}
#leftSide{
width: 330px;
position: relative;
}
#twitter{
position: relative;
width:330px;
}
#rightSide{
position: relative;
width: 570px;
background-color: #339;
height:400px;
display: inline;
}
#gigs{
float: right;
width: 500px;
position: relative;
}
#leftSide and #rightSide need float:left; Also, please make sure their parent element is wide enough for both of them.
check it your code here, float left and right can be used to arrange div horizontally.
http://jsfiddle.net/SfHrb/