I am having issues with the slick slider displaying on my webpage. I have searched for a solution for this issue, but I haven't found any solutions to why this does not work. I have looked at threads such as:
Responsive slick Slider
I can't get my Slick slider to work at all
and others, but I cannot figure out for the life of me what I am doing wrong. This is my first post, so if I didn't supply sufficient information, or if I didn't do something correctly, apologies in advance. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Root Cellar</title>
<!-- google fonts -->
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="slick/slick.css"/>
<link rel="stylesheet" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Project</h1>
<h2>Subtitle.</h2>
</a>
<nav>
<ul>
<li>Main</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/placeholder.jpg" alt="Placeholder" class="profile-photo">
<h3>About</h3>
<p>Hello, this is test text.</p>
</section>
<!-- code for slider -->
<div class="container" id="slider">
<div class="slides">
<div class="slide"><img src="img/web1.jpg"></div>
<div class="slide"><img src="img/web2.jpg"></div>
<div class="slide"><img src="img/web3.jpg"></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
dots: true,
infinite: true,
speed: 700,
autoplay: true,
autoplaySpeed: 2000,
arrows:false,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
</div>
<!-- end code for slider -->
<footer>
<p>© 2016 Taylor Reeves.</p>
</footer>
</div>
</body>
</html>
In your script you aren't selecting the div with all the img. You should use as selector $('.container') instead of $('.slider') as "slider" is the id.
Check this post I can't get my Slick slider to work at all and anyways, I recommend you to make work the Slick's example of usage (http://kenwheeler.github.io/slick/) first and add your HTML later.
Related
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files
Jquery is not working. when, have not add it js in other page. Here, I present small example. I have 2 pages(index.html and about.html). Slideshow banner add in index page. but, banner is not available in about page. So, if, I have not add banner js(owl.carousel.min.js) in about page. So, Other jquery(back to top function) is not work in about page.
Here, I know, I can add slideshow jquery function in index page & remove from custom.js file. So, It is working fine. but, I don't want. because, this is small example. Our site is big(lots of page & js).
what can i do?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>HomePage</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<div class="owl-carousel">
<div class="item"> <img src="image/image1.jpg" alt="" /></div>
<div class="item"> <img src="image/image2.jpg" alt="" /></div>
</div>
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
custom.js
$(document).ready(function(){
//====== Slideshow ======//
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
//
});
Include the owl.carousel.min.js file in the about page as well.
--About Page--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="image/favicon.png" rel="icon" />
<title>About Us</title>
<!-- CSS Part Start-->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- CSS Part End-->
</head>
<body>
<div id="content" class="col-sm-12">
<!-- Slideshow Start-->
<h1>About US</h1>
Content Here
<!-- Slideshow End-->
</div>
<div id="back-top"><a data-toggle="tooltip" title="Back to Top" href="javascript:void(0)" class="backtotop"><i class="fa fa-chevron-up"></i></a></div>
<!-- JS Part Start-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Part End-->
</body>
</html>
Edit the custom js with the following
$(document).ready(function () {
//====== Slideshow ======//
if($('.owl-carousel').length > 0){
$('.owl-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
pagination: true
});
}
//====== Scroll to top ======//
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 180) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
});
jQuery('.backtotop').click(function () {
jQuery('html, body').animate({
scrollTop: 0
}, 'slow');
});
});
keeping the owl slider script inside the condition will solve your issue.
I am writing a simple HTML page using the Twitter Bootstrap.
But the navbar and links are rendered as normal HTML on the browser.
I have referred to multiple sites but the same steps are given everywhere. I am not sure where I am going wrong.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" href= "css/bootstrap.css" type="text/css">
<title> Bootstrap example</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<h1>Hello, world!</h1>
<div class ="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're using incorrect quotations (” instead of " or ') and missing a few equals (=) signs. Change:
<meta charset=”utf-8”>
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
...
<script src ”js/bootstrap.js”></script>
To:
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
...
<script src="js/bootstrap.js"></script>
You are not including bootstrap (probably wrong copy/paste from somewhere).
change
<link rel ”stylesheet” href ”css/bootstrap.css” type=”text/css”>
<script src ”js/bootstrap.js”></script>
to
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<script src="js/bootstrap.js"></script>