How to make actual dots on a slick slideshow? - javascript

How do I make actual dots on the slideshow as I currently just get buttons with numbers on them. I have no idea how to do this, or where to put it. Can anyone help? The code on my site is exactly what I was told to do on a site, but it doesn't work. This is a brand new site that has not yet been published anywhere.
#slideshow .slick-slide { min-height: 1180px;
}
#slideshow .slick-dots {
transform: translateY(-50);
position: relative;
z-index: 10;
bottom: 50px;
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
li {
margin: 0 0.25rem;
}
button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: blue;
text-indent: -9999px;
}
li.slick-active button {
background-color: red;
}
}
<div id="slideshow">
<div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 1</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
<div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 2</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.header ').stickyNavbar();
$('#slideshow').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
autoplay:true,
autoplayspeed: 2000,
});
})
</script>

you need to add:
slick.css
slick-theme.css

Related

slides carousel with parallex effect the work on scroll

I am trying to make a carousel that change slides on scroll, every slide contains 4 layers (background, flower , and a shape) what i want is on scroll the carousel change to the next slide but every layers should slides in efferent timing , exactly like this demo
i have create the carousel and its working on scroll, but i don't know how to make efferent layers and animate their slide effect like the link above.
my code:-
<div id="sec-4" class="section">
<div class="carousel">
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
<div class="message">1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt=""> </div>
<div class="message">2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
<div>
<div class="question">
<div class="avatar">
<img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
<div class="message">3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
</div>
</div>
</div>
</div>
#sec-4{
height: 100vh;
font-size: 3rem;
padding: 0%;
display: flex;
justify-content: center;
align-content: center;
}
#sec-4::before{
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-color: firebrick;
}
.rounded-circle{
border-radius: 50%;
}
.carousel{
background-color: firebrick;
height: 500px;
width: 80%;
}
.message{
width: 50%;
position: relative;
left: 30%;
color: white;
}
.question{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
}
$(document).ready(function(){
$('.carousel').slick({
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
arrows: true,
adaptiveHeight: true,
});
var $questionAvatar = $('.question .avatar');
var $questionMessagge = $('.question .message');
var tlQuestions = new TimelineMax({paused: true, delay: 0.4});
TweenMax.set($questionAvatar, {autoAlpha: 0, scale: 0.6})
TweenMax.set($questionMessagge, {autoAlpha: 0, scale: 0.6})
tlQuestions
.set($questionAvatar, {autoAlpha: 0, scale: 0.6})
.set($questionMessagge, {autoAlpha: 0, scale: 0.6})
.to($questionAvatar, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1)})
.to($questionMessagge, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1), transformOrigin: 'bottom bottom'}, '+=0.1')
tlQuestions.play();
$('.carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
// var currentSlide = $(slick.$slides.get(currentSlide));
tlQuestions.play();
});
$('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
tlQuestions.restart();
});
$('.carousel').on('wheel', (function(e) {
e.preventDefault();
clearTimeout(scroll);
scroll = setTimeout(function(){scrollCount=0;}, 200);
if(scrollCount) return 0;
scrollCount=1;
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
}));
});
my pen:-
Codepen
I have tried to use Swiper.js, Slick and all the possible sliders. but the main problem was that there was 4 layers and the top layer was covering the Swiper so it wont work because its covered.
Then I solved this issue by GSAP scroll Trigger which I triggered the layers moments by mouse scrolling without the need to use any carousel plugin.

Nested accordion not expanding properly javascript

I have created a nested accordion using HTML/CSS and javascript. I have multiple main accordions with 2 sub-accordions in each. My intended result is to expand the sub-accordions and have the next main accordion shift down, however the actual result is that the main accordion does not move down and the sub-accordions aren't expanding properly.
If you run my fiddle example, clicking the first sub-accordion pushes down the second sub-accordion but doesn't push Main#2, and the second sub-accordion doesn't expand on either Main#1 or Main#2.
If someone could help point me in the right direction here I'd really appreciate it! Thanks!
Link to fiddle
HTML:
<div class="collapsible">
<h3><strong>Main#1</strong></h3>
</div>
<div class="content">
<div class="collapsible">
<h4>Sub#1</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="collapsible">
<h4>Sub#2</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="collapsible">
<h3><strong>Main#2</strong></h3>
</div>
<div class="content">
<div class="collapsible">
<h4>Sub#1</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="collapsible">
<h4>Sub#2</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
CSS:
.collapsible {
background-color: white;
color: black;
cursor: pointer;
padding: 1vw;
width:97%;
height: 60px;
max-height: 100%;
margin: 5px 10px 5px 10px;
border: 2px solid black;
text-align: left;
outline: none;
font-size: 25px;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
background-color: white;
transition: max-height 0.2s ease-out;
}
h3{
display:inline-block;
vertical-align: middle;
}
h4{
display:inline-block;
vertical-align: middle;
font-size: 22px;
}
Javascript:
$(function() {
var coll = document.getElementsByClassName("collapsible");
//setting buttons of class 'collapsible' to extend on click
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
});
I made some changes in your code.
I add this part to your CSS:
.collapsible ~ .content{
height: 0px;
}
.collapsible.active + .content{
height: 100%;
}
Commented the 'max-height' line:
.content {
padding: 0 18px;
overflow: hidden;
/*max-height: 0;*/
background-color: white;
transition: max-height 0.2s ease-out;
}
And simplify the JS:
$(function() {
var coll = document.getElementsByClassName("collapsible");
//setting buttons of class 'collapsible' to extend on click
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
});
}
});
Here you can check the changes:
https://jsfiddle.net/xpvt214o/501924/
With this, the hide and show is controlled by CSS.
Hope this help you.

IF function in jQuery function

I have been trying to run an overflow check if I hover on a div. But I use jQuery for the hover function and in the next function there's just simple Javascript. It's not working because I assume one can't use the if then function inside a jQuery function... but then I need the action that if I hover over the div the if then function should be executed. Can someone help me please? =)
So it's jQuery (hover) -> JS (check overflow) -> jQuery (add to div (here: "...read more..."))
HTML:
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
JS:
$('.hover_cap').hover(
if (function checkOverflow(hcd) {
var curOverflow = hcd.style.overflow;
if (!curOverflow || curOverflow === "hidden") hcd.style.overflow = "visible";
var isOverflowing = hcd.clientWidth < hcd.scrollWidth || hcd.clientHeight < hcd.scrollHeight;
hcd.style.overflow = curOverflow;
return isOverflowing;
}) {
function() {
$(this).append($('<a>...read more...</a>'));
},
function() {
$(this).find("a:last").remove();
}
}
}
Here is a snippet for you:
When you hover the outer div, if the inner div's text is overflowed append a 'readmore' button to the outer div.
When you unhover the outer div, if there is an appended 'readmore' button remove it.
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$(document).ready(function(){
$('.hover_cap').hover(function(){
var $this = $(this);
var $textContainer = $this.find('.hcd');
$textContainer.css('overflow','auto');
var isOverflowing = isOverflowed($textContainer[0]);
$textContainer.css('overflow','hidden');
if(isOverflowing) {
$this.append($('<a>...read more...</a>'));
}
}, function(){
var $this = $(this);
var lastA = $this.find("a:last");
if(lastA) {
lastA.remove();
}
})
})
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
<br/>
<br/>
<div class="hover_cap">
<div class="hcd">
Short text, no overflow
</div>
</div>

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/

link hidden until scroll using jquery

I have a back to top link however it shows even when the page is at the top
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
I would like it to be hidden until the user starts to scroll the page - is this possible? If so, how?
The other thing that I have tried and tried to do is make the link change on hover with opacity but it doesn't seem to be working - can anyone see where I have gone wrong.
CSS
.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
opacity: 0;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 0.7;
}
jQuery:
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
$toplink = $('.w-toplink');
if(scrollTop > 0){
$toplink.addClass('active');
} else{
$toplink.removeClass('active');
}
});
CSS:
.w-toplink{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
.w-toplink:hover{opacity:1;}
Edit I've added some extra code for you.
.w-toplink is hidden by default
When the user scrolls it becomes 0.7opacity (through the class .active)
When the users hovers the link, it becomes fully visible (opacity:1)
Do this :
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.w-toplink').fadeIn(250);
} else {
$('.w-toplink').fadeOut(250);
}
});
And add this to your CSS file :
.w-toplink {
display: none;
}
Sounds like fun...
It is possible you have to simply put an eventListener for Scroll.
which is possible in either vanillaJS or jQuery...
see this for more about scroll: https://api.jquery.com/scroll/
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
(Assuming you are already using the jQuery CDN.
<script type="text/javascript">
$("a.w-toplink").hide();
$( window ).scroll(function() {
$( "a.w-toplink" ).css( "display", "visible" ).fadeIn( "slow" );
});
$("a.w-toplink").hide();
$(window).scroll(function() {
$("a.w-toplink").show();
});
.w-toplink {
display: block;
position: fixed;
bottom: 0;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
Back to to top
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
<ul>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>

Categories

Resources