I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a></li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
<li><a class="page-scroll" href="#contact">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<div id="particles-js">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br> I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br> I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br> Languages and Frameworks:
<br> HTML5, CSS3, Bootstrap3,
<br> Javascript, jQuery, Angular.js, Meteor.js,
<br> Node.js, React,js,
<br> Python, php..
<br> Tools & expertise: Git, Responsive Web Design.</p>
</div>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
I want to add background cover as particles.js for the first page .I tried doing as described in the GitHub particles.js, but failed miserably.
Where exactly am I going wrong?
Here is the JSFiddle.
In your jsfiddle you never actually invoked the particles method. Furthermore, text sitting on top of the particles needs to be absolutely positioned;
Here's your working functional example
Note that particles-js needs to be initialized and configured, here's what I used:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
Related
I'm trying to use the slick slider with Bootstrap5 Nav, somehow the slider is not showing up within the active tab content unless I resize the window. I've tried to arrange the sequence of embedded JavaScript, and the slider got broken instead.
It works fine with pure text but not slick slider, the problem seems to be JavaScript of Bootstrap and Slick.
Here's my code: https://codepen.io/HarperJ/pen/XWqrBem
Thanks in advance.
HTML:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button"
role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab"
aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
<div class="slider slider-nav">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
<div class="slider slider-nav2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active{
color: #343434;
border-bottom: 1px solid #343434;
}
JS:
$(document).ready(function(){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav2'
});
$('.slider-nav2').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for2',
dots: true,
// centerMode: true,
centerMode: false,
focusOnSelect: true,
dots: false,
arrows: false
});
})
You need to attach the slick to an event after the tab is shown, otherwise the element doesn't necessarily exists. The proper event is shown.bs.tab. I have set up an example to convey the idea. It isn't generalized enough, but it works.
var did_init_tab_2 = false;
const tabEl = document.querySelector('[data-bs-target="#tab_2"]')
tabEl.addEventListener('shown.bs.tab', event => {
if (did_init_tab_2) {
return;
}
did_init_tab_2 = true;
$('.slider-for2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
$(document).ready(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
});
})
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px solid green; */
}
img {
max-width: 100%;
height: auto;
display: block;
}
.solution_nav .nav-link {
border: none;
background: none;
cursor: pointer;
position: relative;
color: #ddd;
padding: 16px 40px;
}
.solution_nav .nav-link.active {
color: #343434;
border-bottom: 1px solid #343434;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-8">
<ul class="nav solution_nav mb-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_1" type="button" role="tab" aria-selected="false">TAB 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_2" type="button" role="tab" aria-selected="false">TAB 2</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
<div class="slider slider-for">
<img src='https://images.unsplash.com/photo-1637779827592-1a6bc47d21b3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638588635868-cd8290af2266?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzc2OQ&ixlib=rb-1.2.1&q=85' alt=''>
<img src='https://images.unsplash.com/photo-1638058393863-4ae0d0075635?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTkyNzcwMg&ixlib=rb-1.2.1&q=85' alt=''>
</div>
</div>
<div class="tab-pane fade" id="tab_2" role="tabpanel">
<div class="slider slider-for2">
<img src='https://images.unsplash.com/photo-1659427219844-d45d5a49780d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1660508344047-d535438fc3fa?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIwMjE3ODg&ixlib=rb-1.2.1&q=80' alt=''>
</div>
</div>
</div>
</div>
</div>
</div>
I want that my below component would come in a container but instead of coming in container if is showing like this
I want this to be in a container
continuous item by item in an vertical manner .
This happens when i use
<div class="container my-5">
<div class="main-container">
<div class="row">
<div class="col-md-12">
//my items list.
</div>
</div>
</div>
</div>
Actually I have made a project of carousel using html css jquery
now i want it to import in my node project. i want to simply copy that div section and paste it in middle of this code and it appears but it's not appearing.
When I run the code below the output is -
But i want that is should be in a container. but is it no happening need help.
(function($) {
var slide = function(ele, options) {
var $ele = $(ele);
var setting = {
speed: 1000,
interval: 10000,
};
$.extend(true, setting, options);
var states = [{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 134,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 0,
$opacity: 0.1
},
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 110,
$opacity: 1,
},
{
$zIndex: 4,
width: 250,
height: 300,
top: 0,
left: 263,
$opacity: 1
},
{
$zIndex: 3,
width: 170,
height: 218,
top: 35,
left: 470,
$opacity: 1,
},
{
$zIndex: 2,
width: 130,
height: 170,
top: 59,
left: 620,
$opacity: 1,
},
{
$zIndex: 1,
width: 120,
height: 150,
top: 69,
left: 500,
$opacity: 1,
},
];
var $lis = $ele.find("li");
var timer = null;
$ele.find(".hi-next").on("click", function() {
next();
});
$ele.find(".hi-prev").on("click", function() {
states.push(states.shift());
move();
});
$ele
.on("mouseenter", function() {
clearInterval(timer);
timer = null;
});
// .on("mouseleave", function () {
// autoPlay();
// });
move();
autoPlay();
function move() {
$lis.each(function(index, element) {
var state = states[index];
$(element)
.css("zIndex", state.$zIndex)
.finish()
.animate(state, setting.speed)
.find("img")
.css("opacity", state.$opacity);
});
}
function next() {
states.unshift(states.pop());
move();
}
function autoPlay() {
timer = setInterval(next, setting.interval);
}
};
$.fn.hiSlide = function(options) {
$(this).each(function(index, ele) {
slide(ele, options);
});
return this;
};
})(jQuery);
$(".slide").hiSlide();
body {
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.9);
}
body {
background-image: url(ur.jpg);
}
h1 {
margin: 150px auto 30px auto;
text-align: center;
color: red;
}
.hi-slide {
position: relative;
width: 754px;
height: 292px;
margin: 115px auto 0;
}
.hi-slide .hi-next,
.hi-slide .hi-prev {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
border-radius: 50px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: #fff;
color: black;
transition: all 0.6s;
font-size: 20px;
font-weight: bold;
}
.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover {
opacity: 1;
background-color: #fff;
}
.hi-slide .hi-prev {
left: -60px;
}
.hi-slide .hi-prev::before {
content: "<";
}
.hi-slide .hi-next {
right: -60px;
}
.hi-slide .hi-next::before {
content: ">";
}
.hi-slide>ul {
list-style: none;
position: relative;
width: 754px;
height: 292px;
margin: 0;
padding: 0;
}
.hi-slide>ul>li {
overflow: hidden;
position: absolute;
z-index: 0;
left: 377px;
top: 146px;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 3px solid black;
background-color: #333;
cursor: pointer;
}
/* .hi-slide > ul > li > img {
width: 100%;
height: 100%;
background-position: center;
} */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="container my-5 mt-2">
<div class="main-container">
<div class="mt-2 d-flex justify-content-around">
<h2 class="text-center">Timeline</h2>
<div class="slide hi-slide">
<div class="hi-prev"></div>
<div class="hi-next"></div>
<ul>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body space">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="140px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1600080972464-8e5f35f63d08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjh8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1564466809058-bf4114d55352?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br><br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="150px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
Go somewhere
<br>
<br>
<br>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3R8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60" alt="Img 1" height="90px" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p><br/><br><br/></p>
Go somewhere
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I'm looking to build out a slider that auto cycles through individual slides, but also has a navigation that is stacked, and also a slider.
Like this:
The main issues I am running into are having that synced slider only show 1 "active" slide, and the navigation being stacked, and in it's own slider. As it auto plays through to "7" the slider on the bottom should slide over to show that one is active.
This is the closest I could hack together:
My code:
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: false,
autoplaySpeed: 9000,
speed: 700,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true,
asNavFor: '.slider-for'
});
$('.slick').slick();
var $parent = $(".slider-for");
var $nav = $(".slider-nav");
var $content = $nav.find("div");
var killit = false;
$content.on("click", function(e) {
if (!killit) {
e.stopPropagation();
var idx = $(this).data("thumb");
$parent.slick("goTo", idx - 1);
}
});
$nav.on("beforeChange", function() {
killit = true;
}).on("afterChange", function() {
killit = false;
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.slider .action {
display: block;
margin: 100px auto;
width: 100%;
text-align: center;
}
.slider .action a {
display: inline-block;
padding: 5px 10px;
background: #f30;
color: #fff;
text-decoration: none;
}
.slider .action a:hover {
background: #000;
}
.slick-active {
border: 1px solid red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
<div>
<h3>7</h3>
</div>
<div>
<h3>8</h3>
</div>
<div>
<h3>9</h3>
</div>
<div>
<h3>10</h3>
</div>
<div>
<h3>11</h3>
</div>
<div>
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
</div>
View on jsFiddle
The asNavFor property works perfectly if both sliders have the same row property. But because you want the second slider to have three rows you have to use an own sync-function.
First you have to prepare the children of .slider-for: Give them data-thumb attributes like the children of .slider-nav have.
After that you can get the index of the shown slide of .slider-for with that data-thumb attribute
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
and calculate with it the slide index for .slider-nav. Here you have to subtract 1 from for_index because it starts with 1 instead of 0 (like an index would do).
let nav_index = Math.floor((for_index - 1) / 3);
Then you goTo that index.
$('.slider-nav').slick('goTo', nav_index);
To get it to work you have to wrap all that in an event listener (and its handler). I used the setPosition event for that because it styles the current slide on init.
Working example: (simplified for demonstration)
I changed the red border to a brighter background because the border messed up the slider, even with box-sizing: border-box (the last slide was moved to a second, hidden row and therefor not visible).
I also removed autoplaySpeed and speed for .slider-nav because autoplay and fade are set to false.
$('.slider-for').slick({
autoplay: true,
autoplaySpeed: 1000,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
rows: 1,
fade: true,
speed: 700,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: false,
dots: false
});
$('.slider-nav').slick({
autoplay: false,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 2,
rows: 3,
swipeToSlide: true,
infinite: false,
focusOnSelect: true,
pauseOnHover: false,
arrows: true,
dots: true
});
$('.slider-for').on('setPosition', function() {
let for_index = $(this).find('.slick-current')[0].dataset.thumb;
let nav_index = Math.floor((for_index - 1) / 3);
$('.slider-nav').slick('goTo', nav_index);
$('.slider-nav .slick-slide').css('background-color', 'transparent');
$('.slider-nav .slick-slide[data-slick-index="' + nav_index + '"]').css('background-color', '#aaa');
});
body {
background: gray;
}
.slider {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
.slider h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
text-align: center;
transition-delay: 0s;
}
.slider .slick-dots li button::before {
font-size: 15px;
color: white;
}
.slider .slick-dots li.slick-active button::before {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="slider">
<div class="slider-for">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
<div class="slider-nav">
<div data-thumb="1">
<h3>1</h3>
</div>
<div data-thumb="2">
<h3>2</h3>
</div>
<div data-thumb="3">
<h3>3</h3>
</div>
<div data-thumb="4">
<h3>4</h3>
</div>
<div data-thumb="5">
<h3>5</h3>
</div>
<div data-thumb="6">
<h3>6</h3>
</div>
<div data-thumb="7">
<h3>7</h3>
</div>
<div data-thumb="8">
<h3>8</h3>
</div>
<div data-thumb="9">
<h3>9</h3>
</div>
<div data-thumb="10">
<h3>10</h3>
</div>
<div data-thumb="11">
<h3>11</h3>
</div>
<div data-thumb="12">
<h3>12</h3>
</div>
</div>
Please use the below code in notepad and save as html to see output. There is a login form and an animated background. After adding the background, I am not able to click the username box and not able to write anything in that. Tried changing position in CSS. But it is not happening.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> html,
body {
height: 100%;
margin: 0;
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(149, 199, 20, 1) 0%, rgba(0, 212, 255, 1) 96%);
}
.myForm {
background-color: rgba(0, 0, 0, 0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input {
position: fixed;
border-radius: 0 15px 15px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 15px 0 0 15px !important;
}
.submit_btn {
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index: 1;
}
</style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <dvi class="container h-200"> <div class="d-flex justify-content-center"> <div class="card mt-5 col-md-4 animated bounceInDown myForm"> <div class="card-header"> <center> <h5>Admin Portal</h5> </center> </div> <form> <div class="card-body"> <div id="dynamic_container"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-user"></i></span> </div> <input type="text" placeholder="Login ID" class="form-control"/> </div> <div class="input-group mt-3"> <div class="input-group-prepend"> <span class="input-group-text br-15"><i class="fas fa-key"></i></span> </div> <input type="password" placeholder="Login Password" class="form-control"/> </div> </div> </div> <div class="card-footer"><center> <button class="btn btn-success btn-lg submit_btn"> <i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center> </div> </form> </div> </div> </dvi> <div id="particles-js"></div> <script type="text/javascript"> $.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80, "density": {
"enable": true, "value_area": 800
}
}
, "color": {
"value": "#ffffff"
}
, "shape": {
"type": "circle", "stroke": {
"width": 0, "color": "#000000"
}
, "polygon": {
"nb_sides": 6
}
, "image": {
"width": 100, "height": 100
}
}
, "opacity": {
"value": 0.5, "random": false, "anim": {
"enable": false, "speed": 1, "opacity_min": 0.1, "sync": false
}
}
, "size": {
"value": 5, "random": true, "anim": {
"enable": false, "speed": 40, "size_min": 0.1, "sync": false
}
}
, "line_linked": {
"enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1
}
, "move": {
"enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": {
"enable": false, "rotateX": 600, "rotateY": 1200
}
}
}
, "interactivity": {
"detect_on": "canvas", "events": {
"onhover": {
"enable": true, "mode": "repulse"
}
, "onclick": {
"enable": true, "mode": "push"
}
, "resize": true
}
, "modes": {
"grab": {
"distance": 400, "line_linked": {
"opacity": 1
}
}
, "bubble": {
"distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3
}
, "repulse": {
"distance": 200
}
, "push": {
"particles_nb": 4
}
, "remove": {
"particles_nb": 2
}
}
}
, "retina_detect": true, "config_demo": {
"hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover"
}
}
);
}
);
</script>
You have an error in tag name replace dvi to div line 72.
Just change z-index in #particles-js to 0 and add class:
.container {
position: relative;
z-index: 1;
}
Just add the style:
.card {
z-index: 33;
}
because the input is being rendered behind the canvas.
.card
{
z-index: 33;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
z-index:1;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<div id="particles-js"></div>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>
Replace this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" >
with this line
<div class="card mt-5 col-md-4 animated bounceInDown myForm" style="z-index: 999999;">
I have tested your HTML code on my browser and have fixed your problem by just adding a few lines of CSS in style tag. The problem was of z-index
.d-flex.justify-content-center {
position: relative;
z-index: 9999 !important;
}
You can add this css in your style tag and your problem is solved
No need to manage z-index. Just remove the z-index:1 in #particles-js css and move the whole <dvi> block below <div id="particles-js"></div>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 15px !important;
border-radius: 15px !important;
color: white;
position: fixed;
transform: translateX(-50%);
}
input{
position: fixed;
border-radius:0 15px 15px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 15px 0 0 15px !important;
}
.submit_btn{
border-radius: 15px !important;
background-color: #95c714 !important;
border: 0 !important;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<dvi class="container h-200">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<center>
<h5>Admin Portal</h5>
</center>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user"></i></span>
</div>
<input type="text" placeholder="Login ID" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-key"></i></span>
</div>
<input type="password" placeholder="Login Password" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer"><center>
<button class="btn btn-success btn-lg submit_btn">
<i class="fas fa-arrow-alt-circle-right"></i> LOGIN</button></center>
</div>
</form>
</div>
</div>
</dvi>
<script type="text/javascript">
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
});
</script>
</body>
</html>
</body>
</html>
I'm making a website with the Bootstrap carousel wich should contains some animated canvas.
I'd like to use Particles.js animation on second slide but It does not work.
It works only on first slide and I can't figure out why.
Can someone help me?
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<style>
#myCarousel {
height: 500px
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
canvas {
position: relative;
/*pointer-events:none;*/
top: 0;
left: 0
}
/* Particles Canvas*/
#particles-js{
height: 500px;
width: 100%;
background-color: #D0EDF5;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h1>First Slide</h1>
</div>
<div class="item">
<div id="particles-js"></div>
</div>
<div class="item">
<h1>Third Slide</h1>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script type="text/javascript">
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 60,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#0A8B80"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 50
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 20,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#65BBC4",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 80,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#D0EDF5",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
</script>
</body>
</html>
Moreover, I noticed that the animation starts while open the developer console of the browser like the examples below:
Before
After
Because when particles.js initializes, it reads the offsetHeight and offsetWidth properties[1], where these describe the size of visible area[2]. This might be a bug of particles.js, but you can catch the slide event of Bootstrap carousel then initialize the particles.js.
Additional notes:
Initializing particles.js after the slide event makes sure that when it happens, the target element is already visible, so that particles.js can get valid metrics.
Another solution is to fire a resize event after every slide event. The width and height will be recalculated[3]. This is also why the author of this question can start the animation by opening the developer console.
Ref:
[1]: https://github.com/VincentGarreau/particles.js/blob/d01286d6dcd61f497d07cc62bd48e692f6508ad5/particles.js#L18
[2]: difference between offsetHeight and clientHeight
[3]: https://github.com/VincentGarreau/particles.js/blob/d01286d6dcd61f497d07cc62bd48e692f6508ad5/particles.js#L101