I'm having an issue with getting the Owl Carousel plugin to work in my project.
For testing purposes, I've created a new project, just to see if I could get the carousel to work solely on a page.
I reckon I've followed the instructions on https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html step by step.
I've added following files to my project folder:
owl.carousel.min.js
jquery.min.js
jquery.js
owl.carousel.min.css
owl.theme.default.min.css
The jquery.js file is the JavaScript call function.
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}})
Here's my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="owl/owl.carousel.min.css">
<link rel="stylesheet" href="owl/owl.theme.default.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<script src="jquery.js"></script>
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
</body>
</html>
I'm currently as a point where noting at all appears on my page.
Obviously I'm missing or forgetting something, but as this is the first time I've tried to implement the Owl Carousel into a project of mine, I've very little experience.
Hopefully some of you lot can explain to me where I'm going wrong.
Thanks in advance, and sorry if this is a duplicate!
I really did not understand exacly what is your problem, but I've tried you code and a think is just the position of scripts. You put Owl Carousel function above Jquery (library) and Owl Carousel (plugin). The function that call owlCarousel need be interpreted, so for logical propurse Owl Carousel plugin must be above Owl Carousel function.
<script src="jquery.js"></script> <!-- here the problem -->
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
<!-- you need put owlCarousel before juery and owl.carousel -->
The correct would be:
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
<script src="jquery.js"></script>
Hope this help you! :)
I guess the jquery.js file is not being imported correctly.
I tried the same, just used function in the same html its working.
And always import jquery.min.js or jquery.js javascript before owl carousel js files.
Please do check all css and js have been imported correctly.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owlcarousel/owl.theme.default.min.css">
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/owlcarousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: { items: 1 },
600: { items: 3 },
1000: { items: 5 }
}
})
})
</script>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item"> <h4>1</h4> </div>
<div class="item"> <h4>2</h4> </div>
<div class="item"> <h4>3</h4> </div>
<div class="item"> <h4>4</h4> </div>
<div class="item"> <h4>5</h4> </div>
<div class="item"> <h4>6</h4> </div>
<div class="item"> <h4>7</h4> </div>
<div class="item"> <h4>8</h4> </div>
<div class="item"> <h4>9</h4> </div>
<div class="item"> <h4>10</h4> </div>
<div class="item"> <h4>11</h4> </div>
<div class="item"> <h4>12</h4> </div>
</div>
</body>
</html>
Hope this helps you!! :)
Related
I'm trying to build my web portfolio and I want a card format which includes an image thumbnail and text below it. The problem I have is that can't control the size of the initial image and that makes the cards misaligned.
I'm wondering if there's way to fix it so it adjusts to any image size. Here's my code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<i class="fas fa-code"></i> BODY OF WORK
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">FRANK DIN: WEB DEVELOPER</h1>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/LandingPage/blob/master/Landing%20Page%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Landing Page</h5>
<p class="card-text">Landing page for a fictitious dating site built with Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/Bootstrap-Image-Gallery/blob/master/BootstrapPhotoBlog%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Bootstrap Image Gallery</h5>
<p class="card-text">Image gallery built using Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Add this CSS:
.card-img-top {
height: 20vw; // change this value and/or units to your liking
width: 100%;
object-fit: cover;
}
I got problem with modals in my portfolio website. They dont show up. Trying to search for similar issues but non of answer help me in this case. I'm using bootstrap and jquery 3.3.1 and on that config modal dont show up. However when I change jquery to older for example 2.2.4 modals working fine but in my portfolio gallery with images sorting by class using script i written animation slideUp/slideDown stop working even when they was working on jquery 3.3.1.
Here is the head:
<head >
<!-- HTML -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- SKRYPTY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/filtr.js"></script>
<script src="js/scroll.js"></script>
<!-- CZCIONKI -->
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
Portfolio part of body:
<div class="container" id="portfolioSection">
<h1>PORTFOLIO<br>-----</h1>
<div class="kategorie">
<p class="kategoria" id="all">All</p>
<p class="kategoria" id="www">Web Design</p>
<p class="kategoria" id="logos">Logo</p>
<p class="kategoria" id="opak">Opakowania</p>
<p class="kategoria" id="druk">Materiały do druku</p>
<p class="kategoria" id="3d">3D</p>
</div>
<div class="portfolio-container">
<div class="portfolio-item-container portfolio-item druk">
<img class="img-responsive" src="img/lordis.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item www">
<img class="img-responsive" src="img/strona.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item logos">
<img class="img-responsive" src="img/sr.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item 3d ">
<img class="img-responsive" src="img/butelka.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item opak">
<img class="img-responsive" src="img/Opakowania.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
</div>
</div>
And script for gallery fillter:
$(document).ready(function () {
$('.kategoria').click(function () {
var kategorie = $(this).attr('id');
if (kategorie == 'all') {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.portfolio-item').slideDown(390);
}, 400);
} else {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.' + kategorie).slideDown(390);
}, 400);
}
});
Right now I was trying just to add a regular modal example from bootstrap site.
Maybe anyone had a similar issue and is able to help.
--EDIT--
And here is modal button:
<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
But i cant past modal as it is because showing me some error in code but i dont see it. I just copy the example modal from bootstrap page -> components -> modal.
The edistor showing only that:
Modal title × ... Close Save changes
I need serious help with my code. I am pretty new to JavaScript so it could be something really simple.
I want to use a Jquery plugin called ElevateZoom.
I downloaded the plugin, linked the jquery and elevatezoom files (jquery is working fine) and copied the demo's code. The demo works fine, so what I do not get is on the exact same browser but on my page it does not work. I have been scratching my head for at least 3 hours over this and tried multiple things such as implementing the scripts internally, trying different versions of jquery, using different images etc. My HTML and JavaScript code is below (note my first block of javascript works):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jeff/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Jeff/script.js"></script>
<script src="Jeff/jquery.elevatezoom.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="test"></div>
<div class="logo"></div>
<nav>
<div class="container">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Deals</li>
<li>Store</li>
<li>Basket</li>
<li>Coming soon</li>
<li>Support</li>
</ul>
</div>
</nav>
<div class="main-container">
<div class="content">
<br>
<div class="ws_shadow"></div>
<hr>
<div class="contentbox-big2" style="margin-left: 0px;">
<div class="titlebox">
ADS
<div class="titleinfo"></div>
</div>
<div class="newscontent">
<img src="img/brit.png" alt="image" style="width:167px;height:258px;">
<br> <br> <hr> <br> <br>
<img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
<hr>
</div>
</div>
<div class="contentbox-big3" style="margin-left: 0px;">
<div class="titlebox">
Deals
<div class="titleinfo"></div>
</div>
<div class="newscontent2">
<img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png" data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
Pokemon Sun 3DS - £14.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
Player Unknown's Battlegrounds - £19.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
Battlefield 1 - £24.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</div>
<div class="soundcloud">
<iframe width="100%" height="80" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</html>
JavaScript code:
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
I'm really new to Modals and Javascript for that matter and I would like to implement this Modal but it only shows for a quarter of a second then disappears without it being touched or anything.
I have read others' questions about it before and yes, I only have bootstrap.min.js loaded onto my index file. I don't have the bootstrap-modal.js.
Here's my code:
<!-- First Item -->
<div class="item col-md-4 col-sm-6 col-xs-12 mix apps">
<a href="#" data-toggle="modal" data-target="#portfolio-item1">
<img src="http://unsplash.it/680/380?random=4" alt="item" class="img-responsive">
<div class="overlay">
<div class="content">
<h3>Project Name</h3>
<p>Description? Category maybe?</p>
</div>
</div>
</a>
</div>
<!-- Modal-->
<div id="portfolio-item1" tabindex="-1" role="dialog" class="modal fade">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div data-dismiss="modal" aria-label="Close" class="close-btn"><i class="icon-close"></i></div>
<div class="container-fluid">
<div class="row">
<div class="mockup col-md-8">
<div class="device-mockup macbook_2015 portrait gold">
<div class="device">
<div class="screen"><img src="http://unsplash.it/680/380?random=4" alt="..." class="img-responsive"></div>
</div>
</div>
</div>
<div class="text col-md-4">
<h2>Item Name</h2>
<p class="lead">Desription.</p>View on Behance
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal-->
Any suggestions is greatly appreciated!
EDIT: Here's a jsfiddle for it.
EDIT: Here's how my external resources are structured:
HEAD:
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
FOOTER:
</footer>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/plugin.js"></script>
<script src="js/theme.js"></script>
It seems like the problem has to do with your inclusion of external resources. In your application, it's important that you include:
jQuery
Bootstrap JS
Bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You can use CDNs or simply add the files to your project and reference them there, but here's an updated jsfiddle in which the only thing that I changed was including the external resources.
Note: jQuery should be included before Bootstrap's JS.
I figured out what was wrong. Bootstrap JS was being called twice. I had it in the plugin.js and I also had the bootstrap.min.js
Thank you all for your help!
I'm trying to get a simple carousel to work from Twitter Bootstrap 3.1.1. I've stripped it down to the simple generic Bootstrap mark-up with no styling but I've still had no luck getting the images to slide. Would appreciate any suggestions. My mark-up is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="test/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<!-- carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="images/sample1.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample2.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample3.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
<!-- .carousel -->
<!-- end carousel -->
</div><!-- /container -->
<!-- Javascript-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
It's probably because you're not pointing to a CDN version of bootstrap.min.js.
I say this because you're referencing jquery and the css from CDN locations but you're looking for the bootstrap.min.js to be local to your site. Is this how you have it configured?
Change it to use
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js
See http://jsfiddle.net/8vvqf/
Maybe you open the html file directly, instead of from a server. Then the CDN url will become
file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and try again?