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/
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>
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 building a website, and I am not good in js or jQuery. I have no idea what to do. I was in search for couple days, to find any library that support this feature. However, there are different libraries I found, but most of them are separate from what I need, zoom and thumbnails. It has to be similar to Amazon or eBay product listing slider.
Can any one give me a clue where should I start?
PS. I tried swiper.js, but it has zoom only on double click.
Updated 5/16/2017
Example
Hi first of all visit to the link http://www.landmarkmlp.com/js-plugin/owl.carousel/ and download slider.
open your header of the website theme and put the js and CSS which one mentions into the snippet below, and replace the images, js and css files path which where it is.
After that put the HTML sections where you would like to show your slider, and replace the div with your dynamic products loop code.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
Hope so it will work for you. You just need to update files path according where it is situated in your website files directories.
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
I created a Fiddle to demonstrate the problem (also can be run inside this question, below).
I have a sidebar of playing card images that I want to drag into a main area. The sidebar holds a lot of cards so I want it to be scrollable. However, when I give it a scroll feature, then when I drag a card, it gets hidden when I drag it out of the sidebar.
var app = angular.module('myApp', ['ngDraggable']);
app.controller('ctrl', function ($scope) {
});
#gallery-container {
overflow-y: scroll;
}
.card {
width: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<div ng-app="myApp">
<div ng-controller="ctrl">
<div class="row">
<div class="col-xs-3">
<div id="gallery-container">
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<h2> Drop Area </h2>
</div>
</div>
</div>
</div>
When I comment out overflow, like
/*overflow-y: scroll;*/
in the CSS, it now works.
How can I both have a scrolling sidebar and drag items out of it?
To drag objects between zones with scrolled or hidden overflows, you need a to create clone div between the drag div and the drop div using the ng-drag-clone
<div ng-drag-clone="">
<img ng-src="{{clonedData .link}}" width="100px">
</div>
check my Fiddle
I've tried to update your code, but quickly to demonstrate the point:
I noticed you did not create any way for the drop zone to render or store the data being passed.
I created a cards array and a cardsDrop array to store the data.
I also implemented onDropComplete function to push the card object into cardsDrop
$scope.onDropComplete = function (data, evt) {
var index = $scope.cards.indexOf(data);
if (index == -1) $scope.cardsDrop.push(data);
}
and a onDragComplete function to remove a card from the original deck (for some applications, this is optional... sometimes you want a list to drag from that does not remove options):
$scope.onDragComplete = function (data, evt) {
console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.cards.indexOf(data);
if (index > -1) {
$scope.cards.splice(index, 1);
}
and I used ng-repeat to render each deck in the drag zone
<div class="row" ng-repeat="card in cards">
<img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" width="100px">
</div>
and drop zones:
<div style="min-height: 300px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="onDropComplete($data,$event)">
<draggableClone></draggableClone>
<h2> Drop Area </h2>
<div ng-repeat="card in cardsDrop" ng-drag-success="onDragComplete($data,$event)" class="card">
<img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" class="card" alt="" width="100px">
</div>
</div>
In addition, I have added some styling to the ng-drag and ng-drop.
The ngDraggable library you're using does not support adding the element to a parent element (like document.body) once you start dragging. You need that, otherwise the element can never leave the sidebar and keep on being visible. That's how CSS works.
What you could do is use another library that supports adding the draggable element to another element, like jQuery UI:
app.directive('draggable', function() {
return function($scope, $element, $attrs) {
$element.draggable({
appendTo: 'body',
stop: function(event, ui) {
// Handle new position
}
});
};
});
There are probably AngularJS wrappers for Jquery UI out there that do this for you in a more declarative style, or other ngDraggable alternatives that support this.