I've been trying to replicate this cool background image slider that I saw in this website.
URL : https://soto.shinfuji.co.jp/
I tried using slick slider that I knew but still can't figure out that smooth left to right transition and also the zoom out effects. Is there any other JS library I can use to make this slider ?
The slide that I made :
jQuery(document).ready(function($) {
jQuery('.demo').slick({
arrows: 1,
dots: 1,
cssEase: "ease-out",
autoplay: true
});
});
body {
margin: 0;
}
.slick-slide {
img {
max-width: 100%;
height: 100vh;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider demo">
<div><img src="https://images.unsplash.com/photo-1674240568812-d7481f3699a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80" alt=""></div>
<div><img src="https://images.unsplash.com/photo-1573996987033-47fd3a4ca35e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt=""></div>
</div>
</body>
</html>
Here's an informative older post about same subject (other than your last 'zoom' question).
older stackoverflow article
Here's a Slick Slider tutorial on all the basic setup options.
codepen tutorial
<script>
$('.cssEase').slick({
arrows:true,
infinite:true,
slidesToShow:3,
slidesToScroll:3,
autoplay:false,
autoplaySpeed:500,
dots:true,
useTransform: true,
cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
});
</script>
Either web link should help solve certain basic Slick Slider factors for sliding left or right.
As for the zoom in/out factor....
Related
I am trying to create this for a website I am building from scratch.
This is a grid with different images being on the same line, and we could slide them on the left in order to see the one that are hiddens (you can see here that there are more pics outside the frame):
So I made some researches and found about Slick slider, which I tried to use but couldn't get a good result of.
This is my HTML:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hestia - Accueil</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--Slick slider-->
<div class="slider-villes">
<img src="images/accueil/paris-1772x900.jpg" alt="paris">
<img src="images/accueil/nice-1772x900.jpg" alt="nice">
<img src="images/accueil/marseille-1772x900.jpg" alt="marseille">
<img src="images/accueil/lyon-1772x900.jpg" alt="lyon">
<img src="images/accueil/bordeaux-1772x900.jpg" alt="bordeaux">
<img src="images/accueil/ajaccio-1772x900.jpg" alt="ajaccio">
<img src="images/accueil/toulouse-1772x900.jpg" alt="toulouse">
</div>
<!--Slick slider-->
<!--Scripts-->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript" src="js/slick.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
cssEase: 'linear',
swipe: true,
arrows: true,
variableWidth: true
});
});
</script>
<!--Scripts-->
</body>
</html>
And here is my CSS:
.slider-villes {
display: flex;
overflow-x: scroll;
}
.slider-villes img {
width: 20% !important;
height: 20%;
object-fit: cover;
}
And it looks like this:
So there are my pictures, I can slide them, but they will always keep their position to the very left of the screen and they do not seem to be willing to stay close together...
I don't really know what to do at this point... I hope someone will be able to help me.
Thanks.
by removing the css rules for ".slider-villes" and modifying
that of ".slider-villes img" by:
.slider-villes img {
height: 150px;
width:auto;
object-fit: cover;
padding: 20px 0 20px 40px;
}
and putting this script:
$(document).ready(function() {
$('.slider-villes').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true
});
I get this result.
Hi im using visual studio 2017 and i have an html based site.
I want use slick slider that already working on codepen but when i put in visual studio the javascript doesnt work please help me!
Slider Example
console.clear();
$(".slider").slick({
autoplay: true,
slidesToShow: 4,
dots: false,
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
Take a look if you added the library at the head tag in your code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Also, be sure you load it before your script. In codepen you can add the library in the settings, so maybe you forgot to load it in your code in VS. If that doesn't solve your problem, it would be nice if you take a look at your console error... So we can know the problem and help you better.
My libraries is:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.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>
<link href="css/home.css" rel="stylesheet" />
<script src="js/carousel.js"></script>
<script src="js/test.js"></script>
As you can see in first photo i have already put into a test.js that include all javascrpit code tha im calling into my aspx
My css file:
#dealss .slick-slider {
font-size: 30px;
line-height: 1;
text-align: center;
color: white;
}
.slick-slide {
background: rgba(255,255,255,.4);
padding: 40px 0;
}
And my result is :
Result
This is my <head> section that is loading my CSS files without problem on FF and chrome.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<meta name="description" content="">
<link rel="shortcut icon" href="http://www.es-processing.com/static/images/favicon.ico" type="image/x-icon">
<script src="index_files/core.js" type="text/javascript"></script>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
<script type="text/javascript" src="index_files/jquery.js"></script>
<script src="index_files/generic.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var slideInterval=20000;
var slideTransition=3500;
var slideArray=["index_files/background1.jpg","index_files/background2.jpg","index_files/background3.jpg"];
jQuery.fx.interval=33;
// -->
</script>
<link href="index_files/main.css" rel="stylesheet" type="text/css">
<link href="index_files/16204.css" type="text/css" rel="stylesheet">
</head>
The "main.css" isn't loading at all in IE although in previous version of my website it worked fine. However, if i edit the line
<link href="index_files/main.css" rel="stylesheet" type="text/css">
in IE11 developper tool, and rewrite "main.css" and pressed enter, my page will be styled again in IE. Is there a way to force IE to execute the "main.css" line?
I want to display the leaflet pop up on the right or left side of the mouse pointer. By default it is displayed on the top of the mouse pointer.
how can I do that?
The demo is available here: http://jsfiddle.net/Wn5Kh
<!DOCTYPE html>
<html>
<head>
<title>CircleMarker tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css"
/>
<![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
</body>
</html>
In leaflet.css you can change:
.leaflet-popup {
position: absolute;
text-align: center;
}
Try to play around with the position and you will see that you can change where the popup will be opened.
I want a button on my page that will display a dialog asking for text and another button (to submit the information to email) onClick. I cannot get the dialog to show. I adapted an existing example on jsFiddle that displays the dialog onCreate; however, I need the dialog to be displayed when I click a button.
So here it is:jsFiddle
I believe the problem lies in the function call.
<p>Question</p>
This is the start of my HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My title ยท stuff</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/prettify.css" rel="stylesheet">
<link href="css/flat-ui.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico">
<style>
.containerx {
background-color: #1abc9c;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: scroll;
}
.imag{
padding-left:10px;
padding-top:10px;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script src="js/bootstrap-switch.js"></script>
<script src="js/flatui-checkbox.js"></script>
<script src="js/flatui-radio.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<script>
function showDialog(){
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"Send question": function() {
$(this).dialog("close");
}
}
});
}
</script>
You need to select No wrap option in jsFiddle (http://jsfiddle.net/3d7QC/1952/) otherwise showDialog is local function to that scope (in which jsFiddle puts it).
In case of your own page - don't forget to include jquery-ui.
My best guess is that jQuery UI is not loaded when the function is run. You'll need to move the jQuery UI script to be right after jQuery.
While you're at it, you could load the rest of your scripts before the inline one as well.