I'm trying to make a carousel using glide.js library. Everything works just fine but the is only one issue. I want to make it responsive. To do so, I use "breakpoints" but when I test my code in localhost the breakpoints seems to have no effect. Do you know why ?
Below you'll find my code :
<head>
<style>
#import "node_modules/#glidejs/glide/src/assets/sass/glide.core";
</style>
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.core.min.css">
<link href="css/_variables.scss" rel="stylesheet">
<link href="css/glide.core.scss" rel="stylesheet">
<link href="css/glide.theme.scss" rel="stylesheet">
<link rel="stylesheet" href="css/glide.core.css">
<link rel="stylesheet" href="css/glide.core.min.css">
<link rel="stylesheet" href="css/glide.theme.css">
<link rel="stylesheet" href="css/glide.theme.min.css">
<link href="css/test.scss" rel="stylesheet">
</head>
<body style="background-color: black;">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide"><img width="300px" src="https://www.htmlcssbuttongenerator.com/1.png" alt=""></li>
<li class="glide__slide"><img width="300px" src="https://www.htmlcssbuttongenerator.com/2.jpg" alt=""></li>
<li class="glide__slide"><img width="300px" src="https://www.htmlcssbuttongenerator.com/2.jpg" alt=""></li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide"></script>
<script >
const config = {
type: 'carousel',
perView:3,
autoplay: 5000,
hoverpause: true,
breakpoints: {
800: {
perView: 2
},
600: {
perView: 1
}
}
};
new Glide('.glide', config).mount()
</script>
</body>
I'm trying to make it responsive but it seems that breakpoints have no effect.
Related
function takeshot() {
let div = document.getElementById('result');
html2canvas(div).then(
function (canvas) {
document
.getElementById('output')
.appendChild(canvas);
})
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css#master/dist/aqua.min.css">
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js">
</script>
<script type="module"
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>
<script nomodule=""
src="https://unpkg.com/#deckdeckgo/drag-resize-rotate#latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="subj.css"> -->
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght#500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
rel="stylesheet">
<title>Constructor</title>
</head>
<body>
<div class="parent">
<div id="result">
<img src="https://picsum.photos/500/500" alt="" />
en inch piti tpvi
<h3>Heading </h3>
</div>
<form class="login-form" action="javascript:void(0);">
<button onclick="takeshot()">
Take Screenshot
</button>
</form>
</div>
<div id="output"></div>
<!-- <button onclick="delete1()">Delete</button> -->
<script src="script.js"></script>
</body>
</html>
In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all
Why it is not working?
Capturing everything except img tags, and not only I am using tag they are not getting captured neither...
try setting useCORS to true
html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
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
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.
I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
.hidden {
display: none;
}
</style>
<!-- Add jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script>
$('.fancybox-thumbs').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 40,
height : 40
}
}
});</script>
</head>
<body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>
<a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>
</body>
</html>
jsfiddle: http://jsfiddle.net/3bbkjdcc/
i added the same resources as in the working jsfiddle but it didn't work.Any help?
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug.
Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js
Check this: JSFiddle, I forked your JSfiddle and edited the external sources.
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>