I'm trying to implement this 3D slide from the iDangerous Swiper. I could not figure where the width and height of the div class=swiper-slide come from. Below is the body body:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/2.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/4.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/3.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/5.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/7.jpg)">
</div>
<div class="swiper-slide" style="background-image:url(images/6.jpg)">
</div>
</div>
</div>
<script src="scripts/idangerous.swiper-2.0.min.js"></script>
<script src="scripts/idangerous.swiper.3dflow-2.0.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
slidesPerView:3,
loop:true,
//Enable 3D Flow
tdFlow: {
rotate : 30,
stretch :10,
depth: 150,
modifier : 1,
shadows:true
}
})
</script>
When I use firebug to look at the height and width, I could not find where the height: 189px; and width: 293.333px; came from. Any help is much appreciated.
Related
I want to make the following isotope gallery responsive for all different screen size. there is always a gap whenever I want to see it in the smaller size window (320px,576px,768px). How can I solve it?
My website link:Website
Thank You.
$('.i_gallery').isotope({
itemSelector: '.g_item',
percentPosition: true,
masonry: {
columnWidth: '.g_item'
}
});
//filtering Click function
$('.portfolio-menu ul li').click(function() {
$('.portfolio-menu ul li').removeClass('active');
$(this).addClass('active');
let filterItems = $(this).attr('data-filter');
$('.i_gallery').isotope({
filter: filterItems
})
return false;
});
<div class="wrapper">
<div class="portfolio-menu">
<ul>
<li class="active">All</li>
<li data-filter=".web">Web Design</li>
<li data-filter=".logo">Logo Design</li>
<li data-filter=".wordpress">WordPress</li>
<li data-filter=".ecommerce">E-Commerce</li>
</ul>
</div>
<div class="i_gallery">
<div class="g_item web">
<img src="image/10.png" alt="" class="img-fluid">
</div>
<div class="g_item web">
<img src="image/11.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/12.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/13.png" alt="">
</div>
<div class="g_item logo">
<img src="image/14.png" alt="">
</div>
<div class="g_item logo">
<img src="image/15.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/16.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/17.png" alt="">
</div>
</div>
</div>
I have attached the external Js file and HTML file of the isotope gallery.
The isotope gallery seems to be occupying 94% all the time. You can try giving 3% margin to the parent container. So the gallery
i_gallery {
width: 100%;
/* margin: 0 auto; */
margin: 3%;
}
will come at center.
I am building my portfolio website. I have included a slider on my web page, I would like to know how i can control the slider and caption speed.
I had tried including this javaScript code to see if it works but no way.
JavaScript
<script>
$('.sl-slider').carousel({
interval: 10000
});
</script>
HTML
<div class="slider-item js-fullheight">
<div class="overlay"></div>
<div class="container-fluid p-0">
<div class="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div class="one-third order-md-last img js-fullheight" style="background-image:url(images/md_2.jpg);">
<div class="overlay"></div>
</div>
<div class="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '20%' }">
<div class="text">
<h1 class="mb-4 mt-3"><span></span></h1>
<p></p>
<p>Get in touch</p>
</div>
I expected the output to be a slide every 10 seconds, but it is still a slide every 3 seconds
If you are using carousel in bootstrap. Try this:
<div id="yourCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>
I am trying to design a page to be similar as YouTube home page but with one difference (i am using a swipe to show next results in YouTube on-click on the arrows data videos are changed ). my problem is on resize i want to do the same as on YouTube page and hide results relatively with the screen size .
HTML :
<div class="borderbotom">
Restaurants
<div class="swiper-container marginfromborder">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad">
<div class="greydivresto">
<img class="fwimgslider" alt="" src="../images/resto1.png">
<p class="firsttext">The Northern Lights: Trip of a Lifetime</p>
<p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad">
<div class="greydivresto">
<img class="fwimgslider" alt="" src="../images/resto1.png">
<p class="firsttext">The Northern Lights: Trip of a Lifetime</p>
<p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad">
<div class="greydivresto">
<img class="fwimgslider" alt="" src="../images/resto1.png">
<p class="firsttext">The Northern Lights: Trip of a Lifetime</p>
<p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 nopad">
<div class="greydivresto">
<img class="fwimgslider" alt="" src="../images/resto1.png">
<p class="firsttext">The Northern Lights: Trip of a Lifetime</p>
<p class="sndtext">Where to go to see the Northern Lights, including information on Iceland,...</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$( document ).ready(function(){
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 'auto',
centeredSlides: false,
spaceBetween: 10
});
});
the swiper is working fine but anyone has an an idea how display less of result on resize depending on the screen size?
Thanks in advance.
What you need is CSS Media Queries.
This allows you to declare different styles for different screen widths.
You'll be able to make something like :
"If my page width is less than XXX, the player should be placed HERE
and take the width XXX"
For example :
#media (max-width:1024px){
#player{
width: 100%;
}
#sidebar{
display: none;
}
}
CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->
Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);