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;
}
}
Related
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>
So this is what I’m hoping to accomplish.
I currently have a bootstrap grid displaying 1 row and 4 columns.
On desktop devices the 4 columns appears next to each other
On tablets they appear in a 2 x 2 grid and in Mobile devices they appear 4 rows with 1 column.
Is it possible to make it so that when in tablet or mobile to have a carousel that I can slide between the 4 columns? So that when in Tablet there are 2 slides with two of the columns in each slide and when in mobile 4 slides with 1 column in each slide?
Here is my current grid code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
<div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
<div class="row no-gutters">
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SIGN UP</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SELECT AGE GROUP</span>
</div>
<div class="w-100 d-block d-lg-none"></div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>CHOOSE A SUBSCRIPTION PLAN</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>HAVE FUN</span>
</div>
</div>
<div class="row text-center pt-3">
<div class="col">
<button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
</div>
</div>
</div>
If Bootstrap is the only library you're allowed to use, I would imagine you would have to have duplicate contents and show/hide one of them on different breakpoints for carousels or just regular 4-column content.
If that's not the case, I would highly recommend you to use OwlCarousel! That has everything you're looking for.
HTML
<div class="how container">
<h4 class="title">
SUBSCRIBE IN JUST 4 EASY STEPS
</h4>
<div class="owl-carousel owl-theme">
<div class="item">
<figure class="figure">
<img src="https://loremflickr.com/600/200?random=1"
class="figure-img img-fluid w-100" />
<figcaption class="figure-caption">
SIGN UP
</figcaption>
</figure>
</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>
As you can see, basically you just need a wrapper with a class .owl-theme that wraps a collection of .items. Inside each item, you can have any content you want. Here I just demonstrated to have a <figure /> inside of each item.
JavaScript
Make sure you've loaded jQuery first, then the javascript file of OwlCarousel, and then 2 style files: 1 core css and 1 theme. Installation details are documented here.
$(function() {
$('.owl-carousel').owlCarousel({
loop: false,
margin: 0,
nav: false,
responsive:{
0:{
items:1
},
768:{
items:2
},
992:{
items:4
}
}
});
});
See, in the responsive option, this is where you define how many items you want per break point. More info from their documentation site here!
Result
demo: https://jsfiddle.net/davidliang2008/mvn3k08u/22/
I am using baguetteBox.js in a website in two different pages:
homepage
gallery
In the gallery it works well but in the homepage I can't find why the lightbox controls (i.e.:id="baguetteBox-overlay") are appearing at the bottom of the webpage like this:
In both webpages, I am loading the same assets, and console does not show any errors.
You can see it live at:
homepage: http://keraban.marcanuy.com <- the one with the problem
gallery: http://keraban.marcanuy.com/gallery/
Using _baguettebox.js/1.10.0 (with Bootstrap 4 too)
Any idea how to fix it?
Relevant code:
In homepage,
<section class="gallery-block compact-gallery">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image5.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 5</span>
</span>
</a>
</div>
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image1.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 1</span>
</span>
</a>
</div>
....
</div>
</div>
</section>
Loading js at bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', {
animation: 'slideIn',
});
</script>
The base stylesheet was missing and caused the dialog to appear, adding the proper style sheet fixes it <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />.
I am a beginner to Bootstrap. I am trying to accomplish the following:
To make a div that is 2 columns wide on medium and large viewports and 12 columns on extra small viewports.
I understand that bootstrap works in rows and columns(12) and that the columns have breakpoints at which they 'break' and stack as and how applied when the screen size changes. I am thus not sure how to change the width of a div as above.
Can this be done just by using Bootstrap?
They way I think this could be implemented is using javascript to get the screen size(pixels width) and then changing the width value of the div. What could be the approach? Any leads or suggestions would be helpful.
You can simply add more classes according to the viewport width:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Extra small devices Phones = col-xs-n
Small devices Tablets = col-sm-n
Medium devices Desktops = col-md-n
Large devices Desktops = col-lg-n
if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
This will give you the following output at smaller viewports
Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6
You can easily do this, like so:
<div class="col-xs-12 col-md-2"></div>
It's that easy. At the md breakpoint (970px) and above, that div will occupy 2 columns; prior to that it will occupy 12, but you can change the col-xs-12 to any number you'd like.
The bootstrap grid system is easy to get the hang of and you don't need javascript to use it. Read about it here
No you don't need js for that bootstrap grid system will suffice.
You should consult these docs to understand grid system in details--
w3 schools
example
.col-lg-2, .col-md-2, .col-xs-12
{
background-color: blue; height:500px;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-xs-12">
</div>
</div>
</div>
</body>
</html>
i need to develop a slider / carousel like this exactly you can see the example in the site
i pasted the code and tried to study it but i got lost with scripts and the divs background not loaded!
simply i need to sliding three or more divs with custom pagination float on and every div is stretched to the browser page with background image cover like the example i mentioned before. Thank you
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" >
<div class="slider-item__wrap" data-item-count="" >
<div class="slide current" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
DYNAMISM
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>CREATED TO MASTER THE ROAD</p>
</div>
<div class="content__descr">
<p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure. </p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
Alfa D.N.A.
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>DYNAMIC CONTROL</p>
</div>
<div class="content__descr">
<p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic, for performance, Natural for optimum fuel economy and All-Weather for tackling bad weather and low grip conditions.</p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide">
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
<div class="model-item__row">
<div class=" model__content pos--right">
<h2 class="content__title">
SUSPENSION
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>FEEL THE ROAD</p>
</div>
<div class="content__descr">
<p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- END contenitore elemento con scroll orizzontale -->
<!-- START Menu per scroll orrizzontale -->
<div class="slider-menu">
<ul class="slider-menu__items">
<li class="active" data-adobe="content::dynamism">
DYNAMISM
</li>
<li data-adobe="content::alfadna">
Alfa D.N.A.
</li>
<li data-adobe="content::suspension">
SUSPENSION
</li>
</ul>
</div>
<!-- END Menu per scroll orrizzontale -->
<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>
please check this link : https://jsfiddle.net/IA7medd/osdLso66/
HTML :
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
</div>
</div>
</div>
</div>
</div>
The style of each item in the slider which you can change its height :
.item{
height:350px;
background-position: center center;
background-size: cover;
}
This is the necessary plugins for the slider :
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css
and finally the slider script :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
});
});