I was trying to make a Carousel containing multiple images in row and sliding one images at a time with bootstrap only. Like this:
I tried following this post. Instead of bootstrap-3.3.6 and jquery-2.2.2 I used bootstrap-4.3.1 and jquery-3.3.1 But in my case images are in vertical order instead of horizontal order. What am I doing wrong? How can I arrange images in horizontal order?
$(document).ready(function () {
$('.fdi-Carousel .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#outerCarousel {
width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
margin: auto;
width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
left: -33.33%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
</head>
<body>
<main role="main">
<div class="container">
<div class="row">
<div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000"
data-pause="false">
<div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="0"
data-pause="false">
<div class="carousel-inner onebyone-carousel">
<div class="carousel-item active">
<div class="col-md-4">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/d1f542/000&text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/f5429e/000&text=6">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/42cef5/000&text=7">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
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>
</body>
</html>
Thanks.
First, the code you provided was pretty buggy. I believe there are many online carousel example that are just copy&paste from someone else but never try to understand the code, instead, they keep adding more buggy code to fix the problem they can "see", just be careful.
There are many useless <div> wrappers and CSS stylings that intend to fix the buggy behaviors, which obviously makes the debug process worse.
I kindly suggest that you can take a look at the official document first to see the structure for those component and then slowly implement the ideas based on the SO answers.
I just delete most of them from your code for demonstration purpose only.
In order to make it responsive, I believe you have to modify the js code so it can fill up the carousel for different col-size as well as CSS. But it seems like there is not an easy way to work around for CSS part.
$(document).ready(function () {
$('.fdi-Carousel .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
//this will only work for carousel with 3 items since it only adds next() and next.next();
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX() for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.fdi-Carousel .carousel-inner .carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-right {
transform: translateX(0);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
</head>
<body>
<div class="container-fluid">
<div class="row w-100">
<div class="col">
<div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000">
<div class="carousel-inner row no-gutters">
<div class="carousel-item active">
<div class="col-4 text-center">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#outerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#outerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('.fdi-Carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#innerCarousel {
width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
margin: auto;
width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
left: -33.33%;
}
.carousel-item img {
width: 33%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
</head>
<body>
<main role="main">
<div class="container">
<div class="row">
<div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000" data-pause="false">
<div class="carousel-inner onebyone-carousel">
<div class="carousel-item active">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/d1f542/000&text=5">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/f5429e/000&text=6">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/42cef5/000&text=7">
</div>
</div>
<!-- .carousal-inner -->
<a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- .carousel -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</main>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
</body>
</html>
The code is fixed using some HTML and CSS modifications. The fix will make carousal images be displayed in horizontal layout. Here are the list of things I changed
Added width to img in the carousel
Removed the div.col-md-4
Removed #outerCarousel
Related
I've added a footer onto a chat app i'm trying to make with socketio.
The issue I've got is that the markdown input group is not stretching to the page.
If i take out position: fixed; from the "footerr" class then it stretches to fit, but is no longer at the bottom of the page.
Ideally the footer will not go over the sidebar, will auto responsivly resize, aligned to the right and fit the whole "main" section of the page.
Can anyone help?
https://jsfiddle.net/fxyhgz7t/
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
You just need to add width: 100%; to .footerr
/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/templates/simple-sidebar)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
.togglebutton{
color:#FAFAFF;
background-color: #B0B5B3;
}
.sidebar{
background-color: #353B3C!important;
color: #C6C7C4;
}
.topbar{
background-color: #22577A!important;
color: #EEF0F2;
}
.mainpage{
background-color: #EEF0F2!important;
}
.message_remote{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-left-radius: 10px !important;
background-color: #A2999E!important;
}
.message_local{
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
background-color: #22577A!important;
color:#FAFAFF;
}
.tooltip {
display:inline-block;
position:relative;
border-bottom:1px dotted #666;
text-align:left;
}
.tooltip h3 {margin:12px 0;}
.tooltip .right {
min-width:200px;
max-width:400px;
top:50%;
left:100%;
margin-left:20px;
transform:translate(0, -50%);
padding:0;
color:#EEEEEE;
background-color:#444444;
font-weight:normal;
font-size:13px;
border-radius:8px;
position:absolute;
z-index:99999999;
box-sizing:border-box;
box-shadow:0 1px 8px rgba(0,0,0,0.5);
visibility:hidden; opacity:0; transition:opacity 0.8s;
}
.tooltip:hover .right {
visibility:visible; opacity:1;
}
.tooltip .right img {
width:400px;
border-radius:8px 8px 0 0;
}
.tooltip .text-content {
padding:10px 20px;
}
.tooltip .right i {
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 12px;
}
html, body {
font-family: 'Catamaran', sans-serif;
}
#wrapper {
overflow-x: hidden;
}
#sticky-footer {
flex-shrink: none;
}
.footerr {
position: fixed;
bottom: 0;
z-index: 1030;
width: 100%;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght#100&display=swap" rel="stylesheet">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex mainpage" id="wrapper">
<!-- Sidebar -->
<div class="sidebar border-right" id="sidebar-wrapper">
<div class="sidebar-heading font-weight-bolder text-center ">Basic Chat App</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light topbar border-bottom">
<div class="row justify-content-between w-100">
<div class="col-4">
<button class="btn togglebutton" id="menu-toggle">Rooms</button>
</div>
<div class="col-4">
<div class="text-right h2">Main Room</div>
</div>
</div>
</nav>
<!--Messages ----->
<div class="container-fluid mainpage">
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-left">
Lewis
</div>
<div class="col-md text-left">
<div class="row justify-content-start">
<div class="col-md-auto bg-warning text-right ml-2 py-1 message_local">
Test message from me
</div>
</div>
</div>
</div>
<div class="row mx-1 my-2 align-top">
<div class="col-md-auto text-right order-12">
Someone Else
</div>
<div class="col-md text-right order-5">
<div class="row justify-content-end">
<div class="col-md-auto text-right mr-2 py-1 message_remote">
Test message from another person
</div>
</div>
</div>
</div>
</div>
<footer class="footerr">
<div class="input-group mx-2 my-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</footer>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
#Jaocampoo's answer should work. A better solution would be adding a container-fluid class to the footer, while maintaining the .footerr class.
I'm using the carousel code provided by bootstrap and although it's working, the controls are taking up space to the right and left of the image instead of lying on top of them.
I'm a newbie so so far my attempt to fix this was to add
}
.left carousel-control {
position: absolute;
}
.right carousel-control {
position: absolute;
}
but it's not changing anything
Here is the full code, the controls are on the sides of the screen instead of on top of the images:
<!DOCTYPE html>
<html>
<head>
<title>Caroussel test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<link href="css/customer-comp.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 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 type='text/javascript'>
var fqdn = "N1NWVPWEB066.shr.prod.ams1.secureserver.net";
redirectToLogin = function() {
window.location.href = "https://" + fqdn + ":8443";
}
</script>
<style>
.wrapper {
position: relative;
}
.left.carousel-control {
position: absolute;
}
}
.right.carousel-control {
position: absolute;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="2-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="3-rs.png" alt="..." class="img-responsive center-block">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="position: absolute">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
++Update: I've tried to position the arrows on top of the images by adding position: absolute and top: 0 to carousel-control as suggested by #Swati and inspecting the element showed that those rule are being overridden by http://stockpath.bootstrapcdn.com/bootstrap/3.4.1/css/less/carousel.less:96 and mydomain.com/:30
What does this mean? Is there a way around it?
Use this for remove the background.
.carousel-control.left {
background-image: none!important;
}
.carousel-control.right {
background-image: none!important;
}
Add this css into your code. Hope it will work into your question.
.carousel-control {
background-image: none !important;
}
i am trying to create a responsive web site but i am stuck in one place that the images with a background-imaged mask are not functioning properly. It works fine with larger screens but in medium and small screens my headline and some of the images are not seen with the "masked" background image. So could you tell me where i am making the mistake? Is it coding or the method that i am doing wrong?
The pictures that how display the screen are at the bottom of this page.You can see in large screen there is no problem but in other screens you cant see the headline and only half of the images are shown and the background doesnt stretch to cover all images and headline!!!
enter link description here This is the website.You can see better what the problem is.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
}
else{
$(".navbar").css("background", "transparent");
}
})
})
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
.fixed-top .navbar-nav li a:hover {
color: red !important;
}
.fixed-top .navbar-nav li a:focus {
color: red !important;
}
.fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
.fixed-top.scrolled .navbar-nav li a {
color:red !important;
}
.fixed-top.scrolled .navbar-nav li a:hover {
color: red !important;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.my-float{
margin-top:16px;
}
<!DOCTYPE html>
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Avrupa Hayalleri - Avrupa'yı Görme Hayalleriniz Gerçek Olsun</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/ihover.css" >
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top ">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand red-text" href="#">BATU PARFÜM</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bayan Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Erkek Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unisex Parfüm</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
<!-- Links -->
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons ">
<li class="nav-item">
<!-- <a class="nav-link"><i class="fa fa-whatsapp fa-2x green-text "></i>0533 645 89 42</a> -->
<a class="nav-link" href="https://api.whatsapp.com/send?phone=905382392398"><i class="fa fa-whatsapp fa-2x green-text "> </i>0538 239 23 98 </a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<!--Mask-->
<div id="intro" class="view hm-black-strong container-fluid ">
<div class="container-fluid full-bg-img d-flex align-items-center justify-content-center ">
<div class="row container-fluid d-flex align-items-center justify-content-center">
<div class=" col-lg-8 col-md-8 col-sm-8 text-center ">
<hr class="hr-light ">
<!-- Heading -->
<h1 class=" font-bold mb-2 white-text">Kokunu Keşfet</h1>
<!-- Divider -->
<hr class="hr-light pt-2 ">
</div>
<!--Grid row-->
<div class="row col-lg-8 col-md-8 col-sm-8 container-fluid text-center mt-5">
<!-- Top to Bottom-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4 ">
<h2 class="mb-4 font-weight-bold white-text ">Unisex Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/perfume1.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Bayan Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/f484004e6a670c4a5827535756317ba7a.jpg" class="img-fluid" alt="" style="border:3px solid white; " >
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-8 col-sm-8 mb-4">
<h2 class="mb-4 font-weight-bold white-text">Erkek Parfüm</h2>
<div class="view overlay hm-white-slight z-depth-1-half">
<img src="img/e9feb436d5ed39c882d93ac8fc207e82a.jpg" class="img-fluid" alt="" style="border:3px solid white; ">
<div class="mask"></div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Mask-->
</header>
<!--Main Navigation-->
</body>
</html>
small screen
medium screen
large screen
you can use media queries for smaller screens. Try this css for mobile phones:
header{
height: auto;
}
#intro{
padding: 0;
height: auto;
}
.full-bg-img{
position: relative;
}
I am trying to achieve the following design for a bootstrap slider:
And you are right Stack, it does seem to be an awful lot of code in this post. Sometimes this is the nature of posts in programming websites to be mostly code.
So After writing the top paragraph, stack still needs me to add more detail. Let me add that I will be very grateful if someone could help me out and either point me to a gallery that works as my template is designed or give me some ideas how to transform bootstrap slider to my needs.
this is the code:
css:
<style>
.selected img {
opacity:0.5;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: visible !important;
}
</style>
the script:
<script>
$('#myCarousel').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
</script>
And the code:
<div class="container" style="margin-top:20px;">
<!-- main slider carousel -->
<div class="row">
<div class="col-md-12" id="slider">
<div class="col-md-3"> </div>
<div class="col-md-6" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-responsive">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-responsive">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-responsive">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-responsive">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-responsive">
</div>
<div class="item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-responsive">
</div>
<div class="item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-responsive">
</div>
</div>
<!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="col-md-3"> </div>
</div>
</div>
<!--/main slider carousel-->
<!-- thumb navigation carousel -->
<div class="col-md-12 hidden-sm hidden-xs text-center" id="slider-thumbs" style="margin-top:20px;">
<!-- thumb navigation carousel items -->
<ul class="list-inline">
<li> <a id="carousel-selector-0" class="selected">
<img src="http://placehold.it/80x60&text=one" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-1">
<img src="http://placehold.it/80x60&text=two" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-2">
<img src="http://placehold.it/80x60&text=three" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-3">
<img src="http://placehold.it/80x60&text=four" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-4">
<img src="http://placehold.it/80x60&text=five" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-5">
<img src="http://placehold.it/80x60&text=six" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-6">
<img src="http://placehold.it/80x60&text=seven" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-7">
<img src="http://placehold.it/80x60&text=eight" class="img-responsive">
</a></li>
</ul>
</div>
</div>
I'd suggest using a third party plugin such as swiper. Swiper has some pretty neat demos: http://idangero.us/swiper/demos/
The demo I'm talking of is this one & I think it suits your needs: http://idangero.us/swiper/demos/300-thumbs-gallery.html
The code you will need (besides including the swiper scripts & css files) is found on github: https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
</script>
</body>
</html>
I am writing a basic website for a friend, who makes short films and wants to have a site to present his work.
I have a very easy question but sadly can't find a good (or at least understandable for me) answer for it.
I have a site with 5 pictures in a row, each picture is a short film.
Now I want to make sth. to show the "movie details" like this
Since I am not a "pro" I was thinking to use a modal or popover, but I'm struggling trying to customize the layout in both.
So my questions are
Can I customize the layout of modals & popovers, not only colors etc?
Should I use one before the other? It appears to me that modals are "better" if targeting mobile phones, since popovers normally react to hover actions (not possible in many mobiles)
Here my "testing" CodePend https://codepen.io/rgomez/pen/opvyNq
/* HEADER CSS*/
#font-face {
font-family: 'CoffeeTin';
src: url('../fonts/CoffeeTinInitials.eot');
src: url('../fonts/CoffeeTinInitials.eot?#iefix') format('embedded-opentype'), url('../fonts/CoffeeTinInitials.woff') format('woff'), url('../fonts/CoffeeTinInitials.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#myHeader .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: black !important;
}
#myHeader .navbar-brand:hover {
color: red !important;
}
#myHeader .active {
font-size: 120%
}
#navbarHome .nav-link {
font-size: 150%;
font-family: 'CoffeeTin';
color: red
}
/* BODY CSS*/
.tooltip>.tooltip-inner {
background-color: #f00;
max-width: 1000px
}
.tooltip>.tooltip-arrow {
border-bottom-color: #f00;
}
.tooltip {
width: 100%
}
html,
body {
width: 100%;
height: 100%
}
#movies {
margin-top: 4rem;
margin-bottom: 4rem
}
#movies img {
transition: all .3s ease-in-out;
}
#movies img:hover {
transform: scale(1.5)
}
/*Footer CSS*/
#myFooter {
background-color: #000000;
color: white;
}
#myFooter h5 {
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;
}
#myFooter a {
color: #ffffff;
text-decoration: none;
}
#myFooter a:hover,
#myFooter a:focus {
color: rgb(250, 4, 4);
}
#myFooter .social-networks {
text-align: center;
padding-top: 30px;
padding-bottom: 16px;
}
#myFooter .social-networks a {
font-size: 32px;
color: #f9f9f9;
padding: 10px;
transition: 0.2s;
}
#myFooter .contact:hover {
color: #ffffff;
background-color: #ef1a1a
}
#myFooter .facebook:hover {
color: #0077e2;
}
#myFooter .google:hover {
color: #ef1a1a;
}
#myFooter .twitter:hover {
color: #00aced;
}
#myFooter .btn {
color: rgb(0, 0, 0);
background-color: #ffffff;
border-radius: 10px;
border: 0px;
width: 10rem;
margin: 0 auto;
margin-top: .5rem;
margin-bottom: 1.5rem;
text-align: center;
display: block;
line-height: 25px;
}
<html lang="es">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108836206-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-108836206-1");
</script>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href<!DOCTYPE html>
<html lang="es">
<head>
<!-- Include Global site tag (gtag.js) - Google Analytics -->
<title>Panoja Films - Guillermo Paniagua</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" type="image/x-icon">
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta name="keywords" content="film,director,pelicula,guillermo,paniagua,panoja">
<meta name="description" content="Guillermo Paniagua - Film Director Personal-Site - PanojaFilms 2017">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Panoja Films">
<meta property="og:url" content="{{pageUrl}}">
<meta property="og:image" content="{{imageUrl}}">
<meta property="og:description" content="{{description}}">
<meta property="og:title" content="{{pageTitle}}">
<meta property="og:site_name" content="{{siteTitle}}">
<meta property="og:see_also" content="{{homepageUrl}}">
<!-- Include the CSS -->
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/body.css">
<link rel="stylesheet" href="assets/css/header.css">
<!-- Include jQuery (required) and the JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body style="background-color: black">
<header id="myHeader">
<a href="index.html">
<div id="logoHeader" class=" jumbotron-fluid img-fluid" href="#logoHeader" href="index.html" style="background: url(assets/img/logo-banner.jpg); background-size: 100% 100%; height: 15rem"></div>
</a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHome" aria-controls="navbarsExampleDefault">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHome">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="cortometrajes.html">Cortometrajes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="guiones.html">Guiones</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fotografia.html">Fotografia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Sobre Mi</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid" id="movies">
<div class="row">
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" data-toggle="modal" data-target="#myModal" data-placement="auto" data-trigger="click">
<p style="color: white">With Modal Test</p>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Carousel -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
</div>
</div>
<footer id="myFooter" class="">
<div class="container-fluid">
<div class="row">
<div class="col social-networks">
<h5>Youtube</h5>
<a href="https://www.youtube.com/user/panojas90" target="_blank" class="google">
<i class="fa fa-youtube"></i>
</a>
</div>
<div class="col social-networks">
<h5>Facebook</h5>
<a href="#" class="facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col social-networks">
<h5>Twitter</h5>
<a href="#" class="twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
<div class="row">
<a class="btn btn-light contact text-center" href="mailto:" role="button">Contáctame</a>
</div>
<div class="footer-copyright text-center mt-5">
<p>© 2017 Copyright
PanojaFilms - All Rights Reserved. </p>
</div>
</div>
</footer>
</body>