I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.
One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
Related
I'm working on a class project that required me to code a website that sells something. I'm trying to create the shopping cart so that when I click add to cart it should add the product. However, when I added in a bootstrap link my page becomes white. Is the bootstrap the problem or is it something wrong with my code?
My first time using this site so I'm not sure if this is all I need to post. If any other code is required (like the js) just ask. Thank you in advance.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link rel="stylesheet" href="css\splitslick\style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
(problem***)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<section id="" class="container-fluid cart">
<article id="" class="col">
<span class="open-modal">
<i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
</span>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<nav class="navi">
<ul class="list">
<li>PRODUCTS</li>
<li>REVIEWS</li>
<li style="padding: 10px; margin: 10px;"><img src="img/ppppp.png" id="logo"></li>
<li>CONTACT</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="img/banner1.png" />
</div>
<div class="item">
<img src="img/banner2.png" />
</div>
<div class="item">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
</div>
<div class="item">
<img src="img/banner4.jpeg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">PRINTING PRIME</div>
<div class="item">PRODUCTS</div>
<div class="item">THREE</div>
<div class="item">ABOUT US</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src="js/splitslick/js/index.js"></script>
</div>
</article>
</section>
<!-- <section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="col-md-6">
</div>
<div clas="col-md-6">
<div class="col-lg-12">
</div>
</article>
</section> -->
<section id="products" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12 product-grid">
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
<h5 style="color:white;">Sad Face Cap</h5>
<h5 style="color:white;">$12.99</h5>
<div>
<input type="number" placeholder="# of items">
Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
<h5 style="color:white;">Signature Tee</h5>
<div>
<input type="number" placeholder="# of items">
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
<div class=" col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
<h5 style="color:white;">VHS Hoodie</h5>
<div>
<input type="number" placeholder="# of items" >
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
There appear to be a few problems with the files you link:
You appear to have four different jQuery versions included (3.4.1, 2.1.3, 3.1.0 and slim). You only need one reference to jQuery (making sure it is referenced before Bootstrap). Having multiple references will throw errors.
You also appear to reference Bootstrap twice (once from the CDN at the end of your <head>, and once at the start of your <head> with a local reference). Multiple Bootstrap references will also likely throw errors.
You also appear to be missing a reference to PopperJS, which is a required dependency of Bootstrap 4.
css\splitslick\style.css is referenced with backslashes; you'll want forrward slashes.
Your local script.js and style.css come before Bootstrap's JS and CSS, which means that Bootstrap will overwrite your own code; you'll want your code to be loaded last.
Removing these additional references, and making sure that Bootstrap
comes after jQuery, PopperJS and Tether should fix your problem. Shifting your own JavaScript and CSS to the bottom of each respective section should cause it to override any conflicting Bootstrap code.
Here's a modified <head> that should work. Take note of the following order:
Bootstrap 4 CSS -> Plugins -> Fonts -> Custom CSS
jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> Custom JS
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/splitslick/style.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</head>
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 have an image gallery that I created with jQuery, it works very well when I click on each image and it appears in another div. Everything was created with Bootstrap. But I would also like to add a prev and back arrow buttons and I have no clue on how to do that.
This is the HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected { border: 2px solid #000; }
.output img {
margin:0 auto;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="JS/lightbox.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container container-fluid ">
<div class="row text-center gallery">
<h2>Gallery</h2>
<div class="col-sm-4 ">
<p>Dimebag</p>
<img src="http://img.wennermedia.com/article-leads-horizontal/rs-3616-rectangle.jpg" class="img-responsive" alt="Dimebag">
</div>
<div class="col-sm-4 ">
<p>Zack Wylde</p>
<img src="http://loudwire.com/files/2016/05/Ozzfest-Knotfest-ZakkSabbath-20160512-KathyFlynn-4393.jpg?w=630&h=420&zc=1&s=0&a=t&q=89" class="img-responsive" style="width:100%" alt="Zack">
</div>
<div class="col-sm-4 ">
<p>Slash</p>
<img src="http://mmusicmag.com/m/wp-content/uploads/2015/01/Slash-Issue-No37.jpg" class="img-responsive" style="width:100%" alt="Slash">
</div>
</div><!--row-->
<hr>
<div class="row ">
<div class="text-center arrows">
<a class="prev" >❮</a>
<a class="next" >❯</a>
</div><!--arrows-->
<div class="col-md-12 output"></div>
</div><!--row-->
</div>
</div><!--container-fluid-->
</body>
</html>
And this is the jQuery code:
$(document).ready(function(){
$(".output").hide();
$(".arrows").hide();
$('img').click(function(){
$(".output").html('<img class="img-responsive " src="' + $(this).attr('src') + '"/>').fadeIn();
$(".arrows").fadeIn();
});//click
//Arrows
$('.next').click(function(){
//Code Here
});//next
});
I know that I have to add some coding in the function that target the arrow with the class next but Im not sure what.
I am following online tutorial for bootstrap lightbox thumbnail. I typed exact same code multiple times but it is not working. Whenever I click on the image, it opens up in new tab instead of popping up in the same window.
Here is the code,
<title>Lightbox</title>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="F:/LightBox/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
-->
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="1.jpg" alt="" class="img-thumbnail"
</div>
</div>
</div>
<!--
<script src="F:/LightBox/lightbox.js"></script>
-->
</body>
I tried adding lightbox.js file at different positions but, still not working.
You have some errors in your HTML:
Your img tag isn'g closed.
You have this inside your a tag href="1.jpg"="image=1", just
link to the image path once.
You aren't using the data-attribute for the plugin:
data-lightbox="" on your a tag either.
Review the Docs: Lightbox2
Working Example
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/f00" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/f00" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/000" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/000" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350/ff0" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350/ff0" alt="alt">
</a>
</div>
<div class="col-sm-3">
<a class="img-thumbnail" href="http://placehold.it/350x350" data-lightbox="example-set" data-title="title">
<img class="img-thumbnail" src="http://placehold.it/350x350" alt="alt">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
I'm new.when I'm using bootstrap slide show and owl-carousel then bootstrap slide show take owl-carousel CSS how to use that.
carousel item.
<div class="carousel">
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
</div>
bootstrap slide show
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/baner.png" alt="Chania">
</div>
<div class="item">
<img src="images/baner.png" alt="Chania" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
</div>
</div>
Well, maybe it depends in what order you are calling your steelsheets. Whithout any code it will be hard to help you.
In my projects I proceed this way
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>
<div>
<!-- your bootstrap slider -->
</div>
<div>
<!-- your owl slider -->
</div>
<script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>
<!-- init owl -->
<script type="text/javascript">
$('.myOwlCarousel').owlCarousel({
// some configs
});
</script>
</body>
</html>