I'm trying to create a slideshow embedded inside a smartphone image for my website.
Creating the slideshow is pretty easy using Owl Carousel.
What i'm unable to do is placing my div inside the phone image so that it covers all the screen, even when the image has different sizes.
I started by measuring the margins that I had to apply in percents, but I don't like this solution.
Is there a way to manually set the four corners of the div relatively to the image ?
I can use jQuery
Checkout the SNIPPET below.
$('.owl-carousel').owlCarousel({
center: true,
items:1,
loop:true,
margin:0
});
.screen .item{
background-color:#5fba7d;
}
.phone{
background-image: url(https://i.stack.imgur.com/vKQ2K.png);
width: 320px !important;
height: 650px;
background-position: -25px 0;
}
.no-js .owl-carousel, .owl-carousel.owl-loaded {
position: relative;
top: 48px;
width: 278px;
left: 20px;
height: 100%;
}
.owl-stage-outer, .owl-item, .item{
height:100%;
}
.owl-stage{
height:calc(100% - 153px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<div class="phone">
<div class="owl-carousel owl-theme screen">
<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>
<div>
Related
Hi I've been trying to imploment a parallex image into a page today but I cant get the image to be as wide as the page (gets close but leaves a small gap) and also it won't move at all only dissapears when I change position to absolute.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<div class="container">
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="pexels-emiliano-arano-1350197.jpg">
</div>
</div>
.container {
max-width: 100vw;
margin: 0 auto;
}
.parallax {
min-height: 500px;
background: transparent;
}
I have a page where i have two divs which slide in, one from left and one from right, the div which slides from left to right doesn't give any problem, while the one which slides from right to left make the page overwflow horizontally.
I tought that was an issue of some of container so i tried to set the same div to slide instead from left to right and that works, the issue is only when there is a div with right position and negative right margins.
I have set the overflow: hidden; to html and body and tried with all other childs but nothing...
The page still behave like this:
The page start with normal view but i'm able to scroll horizontally to the div which have to be hidden and which then on a specific event i slide in the view...
The page has simple structure like:
$('.scontrino').css('margin-right', -$('.scontrino').width() - 30);
$('.content').on('click', function() {
$(".content").addClass("col-sm-8");
$(".content").removeClass("col-sm-12");
$('.scontrino').animate({
marginRight: 0
}, 300)
})
html,
body {
height: 100% !important;
width: 100%;
color: #001c1f;
overflow: hidden;
}
.scontrino {
position: absolute !important;
right: 0;
top: 0;
background-color: rgba(245, 245, 245, 0.945);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 content">
CONTENT
</div>
<div class="col-sm-4 scontrino">
SLIDER
</div>
</div>
</div>
</body>
But in the example i can't reproduce the horizontal scroll as the overflow: hidden works properly...
EDIT:
That happend only on mobile devices when i'm using chrome developer device toolbar
You can toggle class name to animate the slider as in the following code which might help you
$('.content').on('click', function() {
$(".content").addClass("col-sm-8");
$(".content").removeClass("col-sm-12");
$('.scontrino').addClass("animate-direction");
})
html,
body {
height: 100% !important;
width: 100%;
color: #001c1f;
overflow: hidden;
}
.scontrino {
position: absolute !important;
right: 0;
top: 0;
background-color: rgba(245, 245, 245, 0.945);
transform: translateX(100%);
transition: ease all 300ms;
}
.animate-direction{
transform: translateX(0);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 content">
CONTENT
</div>
<div class="col-sm-4 scontrino">
SLIDER
</div>
</div>
</div>
</body>
This is what I have so far
This is the code that I used to get this image on there:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet"type="text/css"href="index.css"/>
<title>My Title</title>
</head>
<body>
<div class="slider">
</div>
</body>
</html>
and here is the CSS I used for my div "slider" class
.slider{
background-image: url('images/background.png');
height: 100%;
width: 50%;
position: absolute;
background-repeat: no-repeat;
}
So how can I make a div INSIDE of this div, which will allow me to display a slideshow of my app's images? I want it to be very similar to these websites:
shazam.com
instagram.com
venmo.com
I don't know how to fit these images the right way, can somebody please help?
If I understand you correctly, you are talking about something like this
JSFiddle Demo
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-1195){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
.mask {
position: absolute;
left: 31px;
top: 122px;
width: 239px;
height: 342px;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195px;
height: 342px;
}
.page {
width: 239px;
height: 342px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<img src="https://d3sq5bmi4w5uj1.cloudfront.net/images/brochure/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page" style="background: red;"><img src="https://www.w3schools.com/w3images/fjords.jpg"/></div>
<div class="page" style="background: blue;"><img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"/></div>
</div>
</div>
I know this issue might have been raised before but I still could not find the answer after long time searching..
I am trying to use jQuery sortable function to make my images swappable. The function works fine when the position of the img is not set. But when the position is set ( I want to fixed the images at some particular point on the viewpoint) the swap won't happen at all.
Is there a way to make sortable work while the position is set to either "absolute" or "fix?"
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
#sortable > div {
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="sortable">
<div id="demo5" , class="card" , draggable="true" , style="
top: 135px;
left: 190px;
position: fixed;
z-index: 1;
cursor: move;
float:left;
visibility: show;">
Card 1
</div>
<div id="demo6" , class="card" , draggable="true" , style="
top: 135px;
left: 245px;
position:fixed;
z-index: 1;
cursor: move;
visibility: show;">
Card 2
</div>
</div>
I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.
I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!
I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.
Thanks in advance for all the help.
I need it to look like this:
There a couple of things you must do in order to customize the controls :
You have to have the controls in the first place. By default, the prev/Next controls are are set to false:
navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
Owl Carousel CSS (Optional Recommended):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
Owl Carousel Themed CSS (Optional):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
Font-Awesome Icons CSS (Optional):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
jQuery (Essential):
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
Owl Carousel JS (Essential):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<!--These 4 external Files are necessary for Owl to function-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
-->
<!--This link is both owl CSS files combined into one-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel#1.31(owl.carousel.css+owl.theme.css)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<style>-->
<!--This tag is both JS files combined-->
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.4,jquery.owlcarousel#1.31"></script>
<style>
/*
| SVG Nav Arrow Style
*/
/* https://gist.github.com/seeRead/11229083 */
.prod-slider-container {
position: relative;
font-family: font-awesome;
}
.owl-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.owl-prev,
.owl-next {
position: absolute;
}
i.fa {
cursor: pointer;
position: absolute;
font-size: 60px;
padding-top: 8px;
height: 64px;
width: 72px;
color: rgba(0, 0, 0, .5);
background: rgba(0, 75, 222, .7);
border-radius: 50%;
display: table-cell;
}
.owl-prev,
.owl-next {
background-color: transparent;
border: 0px none transparent;
width: 0px;
height: 0px;
}
.owl-perv {
left: 0;
}
.owl-next {
right: 72px;
}
.item {
outline: 3px dashed grey;
}
</style>
</head>
<body>
<!-- + PRODUCT SLIDERS -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="slider_header_text">
<b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
<div class="owl-carousel">
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
</div>
<!--.owl-carousel-->
</div>
<!--.prod-slider-container-->
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
autoPlay: 3000,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
</script>
</body>
</html>