Jquery Slider not working in my first ever website?

Jquery Slider not working in my first ever website? - javascript

I started creating my first ever website(incomplete at the moment) just a few hours ago and got stumbled upon this problem. My jquery slider is not working but all three images for the slider appears on my website. I've already checked link rel directory path and changed it a couple of times but it's still not working. Hope you guys can help.
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
});
$('.slider2').bxSlider({
pager:false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto:true,
pager:false,
controls:false,
});
/**Here is the html(Main.html):** **Here is the css(styles.css):**/
#import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FEFBEF;
background-color: white;
}
.clearfix {
clear: both;
}
#wrapper {
margin: 0 auto;
max-width: 1120px;
background: #FEFBEF;
overflow: auto;
background-color: black;
}
#main_header {
width: 100%;
border: 1px solid black;
font-family: 'Black Ops One', sans-serif;
background-color: black;
color: white;
}
#main_header h1 {
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout {
margin: 50px 20px 0 0;
}
#callout h2 {
text-align: right;
color: white;
}
#callout p {
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu {
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li {
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a {
text-decoration: none;
color: black;
}
/*--- Start Image Slider --*/
.slider {
max-width: 1020px;
box-shadow: 1% 2% 5% 0 rgba(0, 0, 0, 0.07);
}
.slider1 img {
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a {
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 13px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/left-arrow.png") no-repeat 8px 18px;
}
.slider .bx-wrapper .bx-next {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right-arrow.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover {
background: #FCEB86 url("http://www.w3newbie.com/wp-content/uploads/right- arrow.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
border: 1px solid black;
height: 50%;
background-color: white;
}
footer {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: white;
overflow: auto;
}
footer p {
margin-top: 1%;
}
/* **here is another css(jquery.bxslider.css):** */
.bx-wrapper {
max-width: 1020px;
position: relative;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 1020px;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
left: 0px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
max-width: 1020px;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url("img/bx_loader.gif") center center no-repeat #fff;
height: 100%;
max-width: 1020px;
;
position: relative;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url("img/controls.png") no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url("img/controls.png") no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: relative;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url("img/controls.png") -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="../Music Store/img/smiley1.jpg"/></li>
<li><img src="../Music Store/img/smiley2.jpg"/></li>
<li><img src="../Music Store/img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"> </section>
<section class="one-third"> </section>
<section class="one-third"> </section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
</body>
</html>
Here is also a screenshot of my folder:

You can Just use the slick jquery plugin that works great and also makes your slider accessible.
Or, if you want you can use frameworks like Bootstrap Carousel or Foundation Orbit that also will do the job and will make your coding for web styling easier.
Good Luck :)

Include jquery from CDN - https://code.jquery.com/
Add $(function(){ }) - http://api.jquery.com/jquery/#jQuery-callback
Correct img path
And this is your correct Main.html:
<!DOCTYPE>
<html lang="en">
<head>
<title>MUSIC STORE</title>
<link rel="stylesheet" href="jquery.bxslider.css"/>
<link rel="stylesheet" href="styles.css"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jquery.bxslider.min.js"></script><!--For Image Slider-->
<script type="text/javascript">
$(function(){
$('.slider1').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
});
$('.slider2').bxSlider({
pager: false,
captions: true,
maxSlides: 3,
minSlides: 1,
slideWidth: 230,
slideMargin: 10
});
$('.slider3').bxSlider({
mode: 'fade',
captions: false,
auto: true,
pager: false,
controls: false,
});
})
</script>
</head>
<body>
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul>
<li>HOME</li>
<li>INSTRUMENTS</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
</ul>
</nav>
<div class="slide-wrap">
<div class="slider">
<ul class="slider1">
<li><img src="img/smiley1.jpg"/></li>
<li><img src="img/smiley2.jpg"/></li>
<li><img src="img/sad.jpg"/></li>
</ul>
</div>
</div>
<section class="one-third"></section>
<section class="one-third"></section>
<section class="one-third"></section>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</body>
</html>

Related

How to prevent slick slider load hidden divs on page load

I am styling a slick slider, all works fine excluding the hidden divs.
When I refresh the page it was loading all hidden divs and then hidden, so I set overflow:hidden; and it stopped loading hidden divs outside of the slider-holder. But still, keep loading hidden divs in the slider-holder div.
I also need css correction
I have tried variations of this code with and without not:(:nth-child(1));
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
Still loads hidden divs in slider holder when I refresh the page.
My codes:
$('#slider-holder').slick({
autoplay: true,
autoplaySpeed: 4900,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
adaptiveHeight: true,
speed: 200,
swipeToSlide: true,
cssEase: 'linear',
lazyLoad: 'progressive',
});
.featured-slider{
width:50%;
min-height:400px;
position:relative;
display:block;
float:left;
overflow:hidden!important;
}
.slider-holder {
width: 100%;
max-width: 100vw;
display: block;
position: relative;
overflow:hidden!important;
}
.slider {
background-color: lightgray;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-width: 100vw;
min-height: 400px;
display: block;
overflow:hidden!important;
}
.slider .slider-nav {
position: absolute;
height: 48px;
width: 100%;
max-width: 100%;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}
.slider-nav .prev {
font-size: 32px;
color: #fff;
float: left;
height: 48px;
width: 48px;
line-height: 48px;
text-align: center;
position: relative;
left: 10px;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: left;
}
.slider-nav .next {
font-size: 32px;
color: #fff;
float: right;
height: 48px;
width: 48px;
line-height: 48px;
position: relative;
right: 10px;
text-align: center;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: right;
background-color: #f8f8f8;
}
.slider-nav > i {
position: relative;
vertical-align: middle;
display: inline-block;
width: 48px;
height: 48px;
}
.slider .slider:hover .slider-nav.prev,
.slider:hover .slider-nav.next {
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
opacity: 0.8;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
padding: 15px 20px 15px 20px;
pointer-events: none
}
.caption h3 {
margin-bottom: 0
}
.caption .title {
font-size: 15px;
color: #fff !important;
line-height: 21px;
font-weight: 500;
overflow-wrap: break-word
}
.caption a {
pointer-events: auto
}
.slider .caption .title {
color: #fff;
font-size: 22px;
font-weight: 500;
line-height: 28px;
margin-top: 10px;
position: relative
}
.slider .caption .title a {
color: #fff
}
.category-label {
background-color: #0a0a0a;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 400;
position: relative;
height: 1.8em;
line-height: 1.8;
padding: 0 .7em;
cursor: pointer;
z-index: 100;
pointer-events: auto;
white-space: nowrap
}
.slider .category-label,
.featured-news .news-card .category-label {
position: absolute;
top: 20px;
left: 20px
}
.slider .post-meta {
margin-bottom: 0;
position: relative;
z-index: 14
}
.slider .post-meta a {
color: #b0b0b0;
pointer-events: auto;
}
.slider .caption .category-link {
pointer-events: auto
}
.post-meta {
display: block;
width: 100%;
float: left
}
.post-meta span {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block
}
.post-meta a {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block;
font-weight: 600
}
.post-meta span i {
margin-right: 5px
}
.overlay {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.80) 100%);
bottom: 0;
content: "";
height: 50%;
opacity: .9;
position: absolute;
transition: all .3s ease-in 0s;
width: 100%;
will-change: opacity
}
.slick-slide{
outline:none!important
}
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<div class="featured-slider">
<div class="slider-holder" id="slider-holder">
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_7492ab772ab5492d96018940debac479.jpg?1628180370')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 1</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_e285ad0d98faecc0ef4cbee582b77700.jpg?1628180400')">
<span class="category-label" style="background-color: #222222">Children</span>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 2</h3>
</a>
<p class="post-meta">
User
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
</div>
<div id="slider-nav" class="slider-nav">
<button class="prev">
<span class="notext">Back</span>
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="next">
<i class="fa-solid fa-chevron-right"></i>
<span class="notext">Next</span>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

Cannot center navigation dots on a slick slider (slick.js) while being responsive

The slider used is from https://kenwheeler.github.io/slick/
I cannot get the navigation dots to center (horizontally) to the slider itself and stay centered while being responsive
I also can not seem to get the dots to stop disappearing altogether at certain widths (1000px - 740px) and to work with the responsiveness of the slider div
https://jsfiddle.net/spgplayerstack/8eg64abu/16/
.slick-dots
{
background-color: purple;
position: absolute;
bottom: -25px;
display: block;
width: 96.255vw;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
code segment from the JS fiddle
Thanks

Most browsers add padding to <ul> by default, so you need to add padding: 0 to the .slick-dots ul in order to stop pushing the slick dots over, and then they will be horizontally centered.
As far as the dots disappearing, you have dots: false in your slick JS responsive breakpoint, so adjust that to true (or remove that line because dots are true by default in your slick creation) if you'd like to show them.
$(document).ready(function() {
$(".slider-posts-all").slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
dots: true,
appendDots: $(".slick-dots"),
/* to get dots css */
dotsClass: $(".slick-dots"),
/* to get dots css */
autoplaySpeed: 4000,
speed: 700,
nextArrow: $(".next"),
prevArrow: $(".prev"),
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
/* Remove dots: false to show dots between 740px - 1024px */
/* dots: false */
}
},
{
breakpoint: 740,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
],
});
});
body {
background-color: gray;
}
/* #################### post slider css ################### */
.slider-wrapper {
background-color: ;
padding-top: 30px;
}
.slider {
background-color: ;
border: ;
1px solid red;
padding-top: 30px;
position: relative;
}
.slider .slider-title {
background-color: ;
text-align: center;
margin: 30px auto;
font-family: ;
Arial,
Helvetica,
sans-serif;
}
.slider .prev {
position: absolute;
top: 45%;
left: 10vw;
font-size: 2em;
cursor: pointer;
}
.slider .next {
position: absolute;
top: 45%;
right: 10vw;
font-size: 2em;
cursor: pointer;
padding-left: 25px;
}
.slider-posts-all {
background-color: ;
border: ;
1px dashed red;
width: 70vw;
height: 100%;
margin: 0px auto;
overflow: hidden;
padding: -70px 0px -10px 0;
}
.slider-post h4 {
padding: 0px;
margin: 0px;
font-size: ;
}
.slider-post {
background-color: ;
background-color: rgba(40, 40, 40, 1);
opacity: 1;
margin: 0px 0.7vw;
display: inline-block;
height: 100%;
width: 300px;
overflow: hidden;
border-radius: 5px;
color: rgb(200, 200, 200);
font-size: 15px;
}
.slider-image {
background-color: yellow;
width: 100%;
height: ;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.post-info {
background-color: ;
height: 50px;
overflow: ;
border: ;
1px solid green;
margin-top: 0px;
-5px;
margin-left: 5px;
margin-right: 1px;
padding: 10px 5px 20px 0px;
}
.post-info h4 a {
color: inherit;
margin: 5px;
text-decoration: none;
}
.post-info a:hover {
color: rgb(30, 30, 30);
}
.post-info i {
font-size: 15px;
}
#media screen and (max-width: 840px) {
.slider {
padding-top: 12vh;
}
.slider-post {
background-color: ;
height: ;
font-size: ;
}
.slider-posts-all {
width: 85%;
zoom: 90%;
}
.slider .prev {
left: 15px;
top: 55%;
}
.slider .next {
right: 15px;
top: 55%;
}
}
#media screen and (max-width: 740px) {
.slider {
width: ;
}
.slider-post {
background-color: ;
height: ;
font-size: ;
}
.slider-posts-all {
width: 55vw;
zoom: 90%;
}
.slider .prev {
left: 13vw;
}
.slider .next {
right: 13vw;
}
.slider-image {
width: ;
height: ;
zoom: 90%;
}
}
#media screen and (max-width:760px) and (min-width: 595px) {
.post-info i {
font-size: 11px;
}
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
background-color: purple;
position: absolute;
bottom: -25px;
display: block;
width: 96.255vw;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
/* New code */
.slick-dots ul {
padding: 0;
}
/* End new code */
/*#media screen and (max-width: 740px){
.slick-dots{
width: 92.3vw;
}
}
#media screen and (max-width: 600px){
.slick-dots{
background-color: ;
width: 90.05vw;
}
} */
.slick-dots li {
background-color: ;
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
background-color: transparent;
font-size: 0px;
line-height: 0;
border-radius: 50%;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: ;
border: 0;
outline: none;
background: ;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
background-color: ;
color: ;
}
.slick-dots li button:before {
background-color: red;
font-family: 'slick';
font-size: 16px;
line-height: 20px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: 1;
color: purple;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
opacity: 1;
color: blue;
}
/* #################### post slider css ################### */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ################# post slider ################# -->
<div class="slider-wrapper">
<div class="slider">
<!-- for slider area -->
<!-- for arrows -->
<i class="fas fa-chevron-left prev"></i>
<i class="fas fa-chevron-right next"></i>
<div class="slider-posts-all">
<!-- for all posts-->
<div class="slider-post">
<!-- for each post -->
<img src="https://images.unsplash.com/photo-1555589228-135c25ae8cf5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post A for practice</h4>
<br>
</div>
</div>
<div class="slider-post">
<img src="https://images.unsplash.com/photo-1526665814499-fbdb4394ef3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post B for practice</h4>
<br>
</div>
</div>
<div class="slider-post">
<img src="https://images.unsplash.com/photo-1500627297039-f3495734b202?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post C for practice </h4>
<br>
</div>
</div>
<div class="slider-post">
<img src="https://images.unsplash.com/photo-1507220529008-e931df30d1ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post 1 for practice</h4>
<br>
</div>
</div>
<div class="slider-post">
<img src="https://images.unsplash.com/photo-1526665814499-fbdb4394ef3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post 2 for practice</h4>
<br>
</div>
</div>
<div class="slider-post">
<img src="https://images.unsplash.com/photo-1568209865332-a15790aed756?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=60" alt="" class="slider-image">
<div class="post-info">
<h4>Post 3 for practice</h4>
<br>
</div>
</div>
</div>
<div class="slick-dots"> </div>
<!-- for dots -->
</div>
</div>
<!-- ################# /post slider ################# -->
<!-- scripts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

Repetitive images in fancyBox

I have a fancyBox which works well besides the fact, that on certain images it slides the same image for few times. Here is the web page.
I do not use any other jQuery or my own scripts, only fancyBox scripts.
Here is the code I am using:
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
#albums-bar-shape {
width: 1141px;
height: 25px;
margin: 0 auto 0px auto;
position: relative;
/*background-color: #e7e7e7;*/
}
#album {
width: 1150px;
height: 850px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
top: 20px;
}
.albums-bar {
position: relative;
float: right;
left: -50%;
}
.albums-bar ul {
list-style: none;
position: relative;
left: 50%;
}
.albums-bar li {
float: left;
margin-right: 50px;
list-style-type: none;
}
.albums-bar a {
color: #8c8c8c;
font-size: 13pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
.albums-bar a:hover {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
text-decoration: none;
}
#selected-album {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
}
/*Vertical photos formatting*/
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
/*Horizontal photos formatting*/
div.img-wide {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 370px;
}
div.img-wide:hover {
border: 1px solid #777;
}
div.img-wide img {
width: 100%;
height: auto;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
margin: 0px;
padding: 0px;
background-image: url(images/img-noise-361x370.png (1));
background-repeat: repeat;
}
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
#logo {
width: 650px;
height: auto;
margin: 30px auto 30px auto;
display: block;
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/custom.css">
<link rel="stylesheet" type="text/css" href="../../css/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../css/crossfade.css">
<link rel="stylesheet" type="text/css" href="../../css/portfolio.css">
<link rel="stylesheet" href="../../src/css/bootstrap.min.css"/>
<title>Car Photos</title>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<img id="logo" src="http://feanor.cz/images/logo_studio.gif">
<div id="top">
<div id="menu-bar">
<ul>
<li>Home</li>
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="albums-bar-shape">
<div class="albums-bar">
<ul>
<li>Fashion portraits</li>
<li>Art portraits</li>
<li><a id="selected-album" href="#">Car photography</a></li>
<li>Product photography</li>
<li>Interior photography</li>
</ul>
</div>
</div>
<div id="album">
<div class="img-wide">
<a class="fancybox" rel="group" href="1.jpg">
<img src="1.jpg" alt="image 1" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="2.jpg">
<img src="2.jpg" alt="image 2" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="6.jpg">
<img src="6.jpg" alt="image 3" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="4.jpg">
<img src="4.jpg" alt="image 4" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="5.jpg">
<img src="5.jpg" alt="image 5" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="3.jpg">
<img src="3.jpg" alt="image 6" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="7.jpg">
<img src="7.jpg" alt="image 7" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="8.jpg">
<img src="8.jpg" alt="image 8" width="300" height="200">
</a>
</div>
</div>
</body>
</html>

You forgot to close a few of the anchor tags. #6 and #3.
As a result, the browser adds another link which makes fancyBox think there are duplicate images. Here's how Chrome is compiling the code:

Jquery Image Slider not behaving

I liked the look of this image slider:
http://coolcarousels.frebsite.nl/c/58/coolcarousel.html
and wanted to implement it. I copied and pasted the javascript, css, and html.
Here's the site: http://violetoeuvre.com/slider.html
html:
<script>
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 3,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager'
});
});
</script>
</div>
<div>
<div id="wrapper">
<div id="carousel">
<img src="img_slider/1.jpg" />
<img src="img_slider/2.jpg" />
<img src="img_slider/3.jpg" />
<img src="img_slider/4.jpg" />
<img src="img_slider/5.jpg" />
<img src="img_slider/6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</div>
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #ff00ff;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/arrow1.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/arrow2.png) no-repeat -12px -32px;
text-decoration: underline;
}
I downloaded the javascript zip file, and I'm sure that's what's missing in the code to make everything behave properly. I'm new to this, and I just don't know where to fit that part in. In the script? In another referenced file? (Tried these).
Thanks in advance.
Claire

You can try to include jQuery Library as well :
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
include before the slider script, you can add in the header in your case

Slap me if I am wrong but I dont see any jQuery on your page :3

Develop Reference

JavaScript is the programming language of the Web.

Jquery Slider not working in my first ever website? - javascript

You can Just use the slick jquery plugin that works great and also makes your slider accessible. Or, if you want you can use frameworks like Bootstrap Carousel or Foundation Orbit that also will do the job and will make your coding for web styling easier. Good Luck :)

Related

How to prevent slick slider load hidden divs on page load

How to delay something thats just a possibility

Cannot center navigation dots on a slick slider (slick.js) while being responsive

Repetitive images in fancyBox

Jquery Image Slider not behaving

Categories

Resources