I have a web page which has 5 panels in different colors. And there is navigation bullet on right side of the page.
When scrolling the page I want each section to linked with the navigation bullets. Bullet should have active class based on which slide is shown on the viewport.
Any help would be appreciated.
DEMO
I have taken your code in my local and applied below JS and after that its working fine.
Just add Scrollit.Js in your project.
Just you have to do minor changes in your CSS file like below.
In your CSS file line no. #55
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.js--active {
background: #f5f5f1;
opacity: 1;
}
just replaxe it with
.parallax_nav a:active,
.parallax_nav a:focus,
.parallax_nav a.active {
background: #f5f5f1;
opacity: 1;
}
It will be working fine like as you want. Per section it will be apply active class on your <a> tag.
I have made few changes to your code to scroll to the div on click. For onscroll highlight, use scrollspy.js or go with bootstrap navigation.
I personally recommend you to use bootstrap.
<body class="page-loaded">
<div id="page" class="hfeed site full-height">
<div class="page-wrap full-height">
<div class="main full-height" role="main">
<div id="" class="content full-height">
<div class="parallax_boxs">
<div id="black" class="parallax_box">
<div class="parallax_box_inner parallax_box_inner_box1">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="1">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="1">
<video loop="" autoplay="" id="video--1" poster="/assets/video/quizup-poster.jpg">
<source src="video/boostyourearnings.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
fhffdhfd
</div>
<div class="pbox_right">
<h3>rehr</h3>
<p>fshrsh <a target="_blank" class="link--invisible" href="https://fueled.com/android-app-design">Android app</a>.</p>
</div>
</div>
</div>
</div>
</div>
<div id="green" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box2">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="2">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="2">
<video loop="" autoplay="" id="video--2" poster="/assets/video/sunnycomb-poster.jpg">
<source src="video/engageyourfanbase.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
xvdshdsh
</div>
<div class="pbox_right">
<h3>resheh</h3>
<p>rehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="blue" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box3">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="3">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="3">
<video loop="" autoplay="" id="video--3" poster="/assets/video/afterlight-poster.jpg">
<source src="video/showcaseyourvideosfirst.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
sgagash
</div>
<div class="pbox_right">
<h3>Trhr</h3>
<p>shsh</p>
</div>
</div>
</div>
</div>
</div>
<div id="grey" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box4">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="4">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="4">
<video loop="" autoplay="" id="video--4" poster="/assets/video/keyme-poster.jpg">
<source src="video/trackwhatyouredoing.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
eaheheh
</div>
<div class="pbox_right">
<h3>shdh</h3>
<p>srehrh</p>
</div>
</div>
</div>
</div>
</div>
<div id="red" class="parallax_box ">
<div class="parallax_box_inner parallax_box_inner_box5">
<div class="parallax_box_clip">
<div class="parallax_box_phone">
<div class="mobile_responsive">
<div class="mobile_responsive_inner">
<div class="mobile_responsive_bg">
<div class="responsive_bg_wrap" data-reveal-bg="5">
<img alt="" aria-hidden="true" width="377" height="787" src="images/phone.png">
</div>
</div>
<div class="mobile_reveal">
<div class="mobile_reveal_wrap" data-reveal-wrap="5">
<video loop="" autoplay="" id="video--5" poster="/assets/video/athlete-minder-poster.jpg">
<source src="video/youcalltheshots.mov" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="parallax_box__content" style="opacity: 1;">
<div class="pbox_left">
ehwhewhewh
</div>
<div class="pbox_right">
<h3>Cdxhrhs</h3>
<p>fdh</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax_nav">
<a id="black-btn" href="#black" class="js--active">Link</a>
<a id="green-btn" href="#green" >Link</a>
<a id="blue-btn" href="#blue" >Link</a>
<a id="grey-btn" href="#grey" >Link</a>
<a id="red-btn" href="#red" >Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function(){
$('#green-btn').on('click',function(){
$('#green-btn').addClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#black-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').addClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#blue-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').addClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#grey-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').addClass("js--active");
$('#red-btn').removeClass("js--active");
});
$('#red-btn').on('click',function(){
$('#green-btn').removeClass("js--active");
$('#black-btn').removeClass("js--active");
$('#blue-btn').removeClass("js--active");
$('#grey-btn').removeClass("js--active");
$('#red-btn').addClass("js--active");
});
});
Related
<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great
I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.
Here is my HTML code:
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click", function(e) {
tapas.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Main Courses
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Dessert
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3
Just like you did it with Tapas images and then you can used the function for each respective content
var button1 = document.querySelector('.load-more-button');
var tapas1 = document.querySelectorAll('.show-tapas');
button1.addEventListener("click", function(e) {
tapas1.forEach(b => $(b).toggle());
})
var button2 = document.querySelector('.load-more-button-2');
var tapas2 = document.querySelectorAll('.show-tapas-2');
button2.addEventListener("click", function(e) {
tapas2.forEach(b => $(b).toggle());
})
var button3 = document.querySelector('.load-more-button-3');
var tapas3 = document.querySelectorAll('.show-tapas-3');
button3.addEventListener("click", function(e) {
tapas3.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
.show-tapas-2 {
display: none;
}
.show-tapas-2.showing {
display: block;
}
.show-tapas-3 {
display: none;
}
.show-tapas-3.showing {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-2">
Main Courses
</div>
</div>
</div>
<div class="row show-tapas-2">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-3">
Dessert
</div>
</div>
</div>
<div class="row show-tapas-3">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Using some jquery to do that.
I have some rule in a tag. (attribute img-data-class)
and the row including your image should put your class name.
function toggleImage(elm){
var _this = $(elm);
var _class = _this.attr('img-data-class');
$('.' + _class).toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a>
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a>
</div>
</div>
</div>
<div class="row show-main">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a>
</div>
</div>
</div>
<div class="row show-dessert">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I found this code on a website.
It has tabs and images, once I clicked on the table it shows all images associated with this table.
Can anyone help me to find the name of the plugin used in this code?
And why it is not working successfully?
This is all the scripts on the page:
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Bootstrap JS form CDN -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- jQuery sticky menu -->
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="js/main.js"></script>
<!-- Slider -->
<script type="text/javascript" src="js/bxslider.min.js"></script> <script type="text/javascript" src="js/script.slider.js"></script>
<div class="row">
<div role="tabpanel">
<ul class="product-tab" role="tablist" style="margin-top: 10px; margin-bottom: 0px;" >
<li role="presentation" class="active">New Products</li>
<li role="presentation">Best Seller </li>
<li role="presentation">Must Have</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/S/1/S1/42/S1-42-alu-silver-sport-white-grid?wid=332&hei=392&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1472247758975" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/a/pp/apple/tv/apple-tv-hero-select-201510?wid=538&hei=535&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=vWwkV0" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/Music/Bose/bsm51_1.jpg" width="100%" height="200px" style="padding:0px 5px" alt="Slide">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/Accessories/laut/la71_1.jpg" width="100%" height="200px" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="http://cdn.bit68.com/tradeline/media/product_images/iPhone_6s_Space_Gray.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGWpLZhKGrzAHe2i2xG48uTO99bARgaLym8Q-HtymrFsuNfufoSw" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/Music/beats/bm44_1.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/Accessories/ozaki/oc6_1.jpg" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
<div role="Offers" class="tab-pane fade" id="Offers">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="img/image_01.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px" >
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="img/image_02.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/image_03.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/image_04.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
<div role="Must" class="tab-pane fade" id="Must">
<div class="submit-review">
<div class="promo-area">
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo1">
<a href="single.html">
<img src="img/image_01.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo2">
<a href="single.html">
<img src="img/image_02.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo3">
<a href="single.html">
<img src="img/image_03.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
<div class="col-md-3 col-sm-6" style="padding-right:1px;padding-left:1px">
<div class="single-promo promo4">
<a href="single.html">
<img src="img/image_04.png" alt="Slide" width="100%" height="100%" style="padding:0px 5px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The answer is in your question. You can see the scripts that are imported at the beginning of the code
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Bootstrap JS form CDN -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- jQuery sticky menu -->
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="js/main.js"></script>
<!-- Slider -->
<script type="text/javascript" src="js/bxslider.min.js"></script> <script type="text/javascript" src="js/script.slider.js"></script>
It can be owl.carousel + jquery.easing + bxslider
Google those library and see if it is what you want. They may also have added some custom Javascript (Certainly in main.js)
I am writing a web ap which looks like this:
Instead of stacking a bunch of cards like in the image above, I want to try and have a slider that when swiped the next card is displayed.
My html looks like this:
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Starter Template - Materialize</title>
</head>
<body style="">
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Statistics</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul style="left: -250px;" id="nav-mobile" class="side-nav left">
<li>Statistics</li>
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryCount" class="center-align orange-text text-darken-2">161</h3>
<p class="center-align">Breweries Tried</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Structure -->
<div style="z-index: 1003; display: none; opacity: 0; transform: scaleX(0.7); top: 0px;" id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">99 bottles of beer on the wall...</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div style="left: 0px;" class="drag-target"></div><div class="hiddendiv common"></div></body></html>
I tried adding them to an image slider that is offered with materializecss which is what I am using to build my web app but it didnt work.
Anyway to slide them with html5 and css?
Here is a fiddle:
https://jsfiddle.net/mjbbc48h/
You can simply replace the image content in the materializecss slider with your card element. Like so:
<div class="slider">
<ul class="slides">
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="breweryVisit" class="center-align orange-text text-darken-2">16</h3>
<p class="center-align">Breweries Visited</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="row" style="margin:1;">
<div class="col s12 m7">
<div class="card valign-wrapper">
<div class="card-content valign center-block">
<div class="row">
<h3 id="beerCount" class="center-align orange-text text-darken-2">410</h3>
<p class="center-align">Beers Tasted</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
This should give you what you are looking for. Remember to initialize the slider.
Below this is my royal slider code. This slider shows images only. I want to add video on this royal slider.I tried and also google but can't fine this type of solution. How can I do it? Thank you.
HTML:
<div class="slideholder">
<div class="royalSlider rsDefault">
<div class="rsContent">
<img class="rsImg" src="img/1.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/2.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/3.jpg" />
</div>
</div>
</div>
CSS:
.royalSlider{
margin:0 auto;
max-width:600px;
width:auto;
}
JavaScript:
<script>
jQuery(document).ready(function($) {
$(".royalSlider").royalSlider({
transitionType:'move',
imageScaleMode: 'fill',
autoScaleSlider:true,
autoScaleSliderWidth:100+'%',
autoScaleSliderHeight:'auto',
autoHeight:true
});
});
</script>
Try adding the video to the div like the below code
<div class="slideholder">
<div class="royalSlider rsDefault">
<div class="rsContent">
<img class="rsImg" src="img/1.jpg" />
</div>
<div class="rsContent">
<img class="rsImg" src="img/2.jpg" />
</div>
<div class="rsContent">
<video controls>
<source src="img/4.mp4" type="video/mp4">
<source src="img/4.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div id="full-width-slider">
<div class="rsContent" data="royalSlider">
<div>
<img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
</div>
</div>
</div>
<script>
// start video autoplay
jQuery(document).ready(function ($)
{
$('#full-width-slider').data('royalSlider').playVideo();
});
</script>