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)
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 am working on simple HTML web but I am stuck on something like 3 boxes I want accordingly in one line you can check the screenshot of example for that how I want I tried many times to do by every way but I failed to solve or sort out this issue kindly please help me in that
see this screenshot how it showing
Here is the screenshot of the example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="property-wrap mb-2 row no-gutter" id="pp">
<div class="col-md-4 col-sm-20">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/smart1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/smart1" class="image-effect overlay">
<img src="assets/images/smart1-logo.svg" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">SuperShopper</h4>
<div class="mb-15">
<p>Lekki Phase 1, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/green_way'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase primary-bg">for rent</span> -->
<a href="https://supershop.ng/green_way" class="image-effect overlay">
<img src="assets/images/green_way.png" alt="" style="width: 100px; height: 100px; border-radius: 100px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">GreenWay Supermarket</h4>
<div class="mb-15">
<p>142 Lekki - Epe Expressway, Beside Monarch Event Center, Lekki</p>
</div>
</div>
<!--content-->
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="ppt-list list-vw mb-30 featured" style="cursor: pointer" onclick="window.location.href='https://supershop.ng/pjv1'">
<figure id="mfs">
<!-- <span class="tag left text-uppercase bg-dark">$5,70,0000</span>
<span class="tag right text-uppercase bg-blue">for sale</span> -->
<a href="#" class="image-effect overlay">
<img src="assets/images/pjv.png" alt="" style="width: 100px; height: 100px; border-radius: 0px;" id="mis">
</a>
</figure>
<!--fig-->
<div class="content" id="mcs">
<h4 class="mb-0">PJV Supermarket</h4>
<div class="mb-15">
<p>36b Kusenla Road, Ikate Elegushi, Lekki</p>
</div>
<!--content-->
</div>
<!--content-->
</div>
</div>
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>
This is not my script. I just copy scripts and learn something of them so I can advance in HTML knowledge. This code it works only in a part. It shows ok by part of design, but when I press arrows it won't slide to new images
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-630px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='dharma/'" href="dharma/">
<img src="http://i.imgur.com/QXMmQwN.png">
<div class="caption">Dharma</div>
</a>
<a onclick="location.href='tegnio/'" href="tegnio/">
<img src="http://i.imgur.com/DXB4jK7.png">
<div class="caption">Sliv</div>
</a>
<a onclick="location.href='pony/'" href="pony/">
<img src="http://i.imgur.com/bMwdWFF.png">
<div class="caption">MLP Typer</div>
</a>
<a onclick="location.href='word/'" href="word/">
<img src="http://i.imgur.com/8QWNpb4.png">
<div class="caption">Microsoft Word</div>
</a>
<a onclick="location.href='studio/'" href="studio/">
<img src="http://i.imgur.com/tTwtzQz.png">
<div class="caption">Visual Studio</div>
</a>
<a onclick="location.href='lolcode/'" href="lolcode/">
<img src="http://i.imgur.com/OzxnXFb.png">
<div class="caption">LOLCODE</div>
</a>
<a onclick="location.href='hey/'" href="hey/">
<img src="http://i.imgur.com/5Sqs6jO.png">
<div class="caption">HE-MAN</div>
</a>
<a onclick="location.href='braile/'" href="braile/">
<img src="http://i.imgur.com/vV4t9Jm.png">
<div title="" class="caption">Braile Version</div>
</a>
<a onclick="location.href='alien/'" href="alien/">
<img src="ASSETS/img/alien.png">
<div title="" class="caption">Alien Version</div>
</a>
</div>
</div>
<div class="swiper-slide" data-swiper-slide-index="2" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a onclick="location.href='fallout/'" href="fallout/">
<img src="ASSETS/img/fallout.png">
<div title="Hacking is now possible without vision!" class="caption">Fallout Version</div>
</a>
<a id="green" onclick="location.href='blue/'" href="blue/">
<img src="http://i.imgur.com/57C9mln.png">
<div class="caption">GeekTyper Blue</div>
</a>
<a onclick="location.href='writer/'" href="writer/">
<img src="ASSETS/img/writer.png">
<div title="Hacking is now possible without vision!" class="caption">Writer</div>
</a>
<br><br>
<a style="color:white;padding:20px;" href="mailto:geektyper#outlook.com">Suggest a theme</a>
</div>
</div>
<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 600px; margin-right: 30px;">
<div id="images" style="margin-left:70px;">
<a id="green" style="background:#bd0101;" onclick="location.href='tegnio/'" href="tegnio/">
<img src="ASSETS/img/main.png" title="Remembers your settings">
<div class="caption">Tegnio (Customizable)</div>
</a>
<a onclick="location.href='shield/'" href="shield/">
<img src="ASSETS/img/shield.png">
<div title="" class="caption">SHIELD Version</div>
</a>
<a id="green" onclick="location.href='scp/'" href="scp/">
<img src="http://i.imgur.com/bF2tc2V.jpg">
<div class="caption">SCP</div>
</a>
<a onclick="location.href='umbrella/'" href="umbrella/">
<img src="ASSETS/img/umbrella_thumb.png">
<div class="caption">Umbrella Corp</div>
</a>
<a onclick="location.href='aperture/'" href="aperture/">
<img src="http://i.imgur.com/Kb4o0uI.jpg">
<div class="caption">Aperture Science</div>
</a>
<a onclick="location.href='combine/'" href="combine/">
<img src="http://i.imgur.com/sxaHAoi.jpg">
<div class="caption">Combine</div>
</a>
<a onclick="location.href='blackmesa/'" href="blackmesa/">
<img src="http://i.imgur.com/T1pL2ib.jpg">
<div class="caption">Black Mesa</div>
</a>
<a onclick="location.href='plain/'" href="plain/">
<img src="http://i.imgur.com/RZG9ghe.png">
<div class="caption">Plain Terminal</div>
</a>
<a onclick="location.href='matrix/'" href="matrix/">
<img src="http://i.imgur.com/lHjKmQT.png">
<div class="caption">Matrix</div>
</a>
</div>
</div></div>
<div class="swiper-pagination swiper-pagination-clickable"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
this is script
<script data-rocketsrc="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
spaceBetween: 30
});
</script>
Always check the console!
[F12] on the keyboard
When you have errors, look for 404 (Not Found) on .js files first.
Then, you'll probaly see errors like Swiper is not defined dissapear too.
About ERR_BLOCKED_BY_CLIENT, this is due to the use of Ad Block. It isn't due to your code.
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");
});
});