I have a JavaScript slider that I want to be 100% of the width.
Here is my HTML:
<div id="mhblindsshow">
<style type="text/css"> #mhblindsshow img { display:none; } </style>
<img src="images/main/1.jpg" />
<img src="images/main/2.jpg" />
</div>
Here is my CSS:
.mhSlideshow {
position:relative;
display:block;
margin:0 auto;
}
.mhSlideshow img {
position:absolute;
top:0px;
left:0px;
display:none;
}
and here is the javacript that controls the width.
$(document).ready(function () {
$("#mhblindsshow").mhslideshow({
width: $(window).width(), height: 500,
scaleMode: 'scaleToFill',
firstSlide: 0,
randomPlay: false,
autoPlay: true,
showShadow: false,
loopForever: true, loop: 0,
showBorder: false, borderSize: 6, borderColor: '#FFFFFF',
effectMode: 'blind', interval: 2500, effectSpeed: 1000,
totalSlices: 5, sliceInterval: 50,
showCaption: false,
textCSS: '.title {
font-size:12px;
font-weight:bold;
font-family:Arial;
color:#ffffff;
line-height:200%;
}
.alt {
font-size:12px;
font-family:Arial;
color:#ffffff;
}',
captionPosition: 'bottom', captionBarColor: '#333333', captionBarOpacity: 0.8,
captionBarPadding: 8, captionAlign: 'center',
showNavArrows: true, autoHideNavArrows: false,
showNavDots: true, navDotsBottom: 6,
navDotsAlign: 'right', navDotsLeftRightMargin: 16,
effect: 'fade',
jsFolder: 'js'
});
});
If my image is larger/smaller then the window, the image doesn't fit to 100%.
I would want the image width to always be 100% and the height should be flexible based on image ratio.
I tried adding width:100% in the CSS, but it didn't change anything.
$("img").css("height","100%");
$("img").css("width","100%");
this code require jquery library
and U should use class or id at html so will be img.class or img#id
Related
I am building a Swiper carousel (triggered by mouse scrolling) that has a frame on the top of it. this is the design
the red color is the frame that should cover the carousel. the middle hole is transparent
I have tried to make the red image as a mask-image so that I can control the swiper carousel by mouse scrolling, but the center hole goes white and the red color is transparent! and what I want is exactly the opposite I want the hole transplant and the outside the hole the red color.
Is there any way to add the image frame on the top of the swiper carousel and still can trigger and control the carousel positioned under the frame?
Code:
codePen
// https://swiperjs.com/
// ===================== -->
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed: 1200,
grabCursor: true,
mousewheel: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChangeTransitionStart: function() {
// Slide captions
var swiper = this;
setTimeout(function() {
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
}, 500);
gsap.to($(".current-title"), 0.4, {
autoAlpha: 0,
y: -40,
ease: Power1.easeIn
});
gsap.to($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: -40,
delay: 0.15,
ease: Power1.easeIn
});
},
slideChangeTransitionEnd: function() {
// Slide captions
var swiper = this;
var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
gsap.from($(".current-title"), 0.4, {
autoAlpha: 0,
y: 40,
ease: Power1.easeOut
});
gsap.from($(".current-subtitle"), 0.4, {
autoAlpha: 0,
y: 40,
delay: 0.15,
ease: Power1.easeOut
});
}
}
});
// Slide captions
var currentTitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-title");
var currentSubtitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
body {
margin: 0;
}
/* Swiper */
.swiper-container {
position: absolute;
width: 100%;
height: 100vh;
mask-image: url(https://i.ibb.co/kmBv430/Frame.png);
mask-size: contain;
}
/* .above{
position:absolute;
left:25%;
background-color: #fff;
width: 200%;
height: 100vh;
z-index:2;
mask-image: radial-gradient(circle at center, transparent 49%, white 50%);
mask-size: contain;
mask-repeat: no-repeat;
} */
/* Swiper slides */
.swiper-slide {
position: relative;
z-index: 1;
}
.slide-1 {
background-color: #e67204;
}
.slide-2 {
background-color: #e67204;
}
.slide-3 {
background-color: #e67204;
}
.rounded-circle {
width: 400px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 30%;
left: 35%
}
.htu {
position: absolute;
color: #fff;
font-size: 50px;
top: 39%;
left: 10%;
z-index: 2;
}
/* Slide captions */
.slide-captions {
position: absolute;
top: 50%;
left: 75%;
color: #FFF;
z-index: 999;
transform: translateY(-50%);
}
.slide-captions .current-title {
position: absolute;
left: 60%;
margin: 0;
font-size: 48px;
}
.slide-captions .current-subtitle {
margin: 10px 0 0 0;
font-size: 28px;
}
/* Swiper arrows */
.swiper-pagination-bullet-active {
background-color: #fff;
}
/* Swiper pagination */
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 50px;
}
.swiper-button-prev,
.swiper-button-next {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script src="https://unpkg.com/swiper#6.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<h1 class="htu">HOW TO USE</h1>
<div class="above"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide slide-1" data-title="Slide One" data-subtitle="">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-2" data-title="Slide Two" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
<div class="swiper-slide slide-3" data-title="Slide Three" data-subtitle=" ">
<img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
</div>
</div>
</div>
<!-- Slide captions -->
<div class="slide-captions"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I have solved my problem by using GSAP scroll Trigger to trigger the movement of each layer and it works for me.
let tl2 = gsap.timeline({
scrollTrigger :{
trigger : "#sec-4",
pin: true,
scrub: true,
start : "center center",
end: "+=" + (window.innerHeight * 8),
}
});
tl2.from('.step-1', 1, {y: 100, opacity:0 })
tl2.to('.step-1', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -300}, 'frist')
tl2.to('.girl-frame', 1 , {x: -300}, 'frist')
tl2.from('.step-2', 1, {y: 100, opacity:0 }, 'frist')
tl2.to('.step-2', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -600}, 'second')
tl2.to('.girl-frame', 1 , {x: -670}, 'second')
tl2.from('.step-3', 1, {y: 100, opacity:0 }, 'second')
tl2.to('.step-3', 1, {opacity:0 })
tl2.to('.flwres-frame', 0.5 , {x: -900}, '3rd')
tl2.to('.girl-frame', 1 , {x: -1050}, '3rd')
tl2.from('.step-4', 2, {y: 100, opacity:0 }, '3rd')
I have data in slick js slider
I want to reload another data and reinit slick with new data.
I tried this :
Here is the function:
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
code for re-init slider
var data = "<div>a</div><div>b</div>";
$("#categorySlider-13").slick('reinit');
$("#categorySlider-13").html(data);
$("#categorySlider-13").slick(getSliderSettings());
But it doesnt work !
If You know another js plugin carousel working with ajax call, can you tell it to me please ?
You need to call $("#categorySlider-13").slick('unslick') before assigning new data then init again.
Also, it advised to use .not('.slick-initialized'), so you done accidentally initialize slider more than once See here for more
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
$("#categorySlider-13").slick(getSliderSettings());
$('#btn1').on('click',function(){
var data = "<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>";
$("#categorySlider-13").slick('unslick')
$("#categorySlider-13").html(data);
$("#categorySlider-13").not('.slick-initialized').slick(getSliderSettings());
});
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section id ="categorySlider-13" class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
<button id="btn1" >
Click me!!
</button>
i am using owl carousel and i want to change the default nav buttons "prev next" with arrows and place them on the right side and left side in carousel.
See the picture:
https://postimg.org/image/w4od5pb2z/
http://raffe.ro/bogdan.v/one-page/
Here is the js code:
< script >
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 3000,
smartSpeed: 900,
autoplayHoverPause: false,
loop: true,
margin: 30,
nav: false,
dotsEach: true,
touchDrag: true,
dotData: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})
}) <
/script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Place the following code in your css (style.css):
.owl-nav .owl-prev,
.owl-nav .owl-next {
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.owl-nav .owl-next {
left: auto;
right: 0;
}
In theory, it should work
I am trying the reduce the font-size using [titleFontSize: 12..] and various combinations. but not working.
same i used for [valueFontSize: ..] & [labelFontSize: ..]
How can i change the font-size of Title,Value & Labels?
Code:
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js">
<script type="text/javascript">
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: 12,
titlePosition: "below",
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
label: "Mbps",
lableFontSize: "10px",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
</script>
var gD = new JustGage({
id: "jgDownload",
value: 67,
decimals: 2,
min: 0,
max: 1000,
title: "Download",
titleFontSize: "5px",
titlePosition: "below",
valueFontFamily: "Georgia",
valueFontSize: "5px",
label: "Mbps",
width: 300,
height: 200,
relativeGaugeSize: true,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
#divDownloadOuter {
width: 50%;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.js"></script>
<div id="divDownloadOuter">
<div id="jgDownload"></div>
</div>
JSFiddle: Link
Try with titleMinFontSize. It will work.
titleMinFontSize: 20,
Check this link for other attributes.
Solution using CSS:
/* Title */
#jgDownload text:nth-child(6) tspan{
font-size: 0.8em !important;
}
/* Value */
#jgDownload text:nth-child(7) tspan{
font-size: 0.5em !important;
}
/* Label */
#jgDownload text:nth-child(8) tspan, #jgDownload text:nth-child(9) tspan, #jgDownload text:nth-child(10) tspan{
font-size: 0.9em !important;
}
Check this link with Example: https://jsfiddle.net/amitshahc/gf0gm69j/5/
To get it working with justGage v1.2.2 I used the following:
/* Value */
#jgDownload > svg:nth-child(1) > text:nth-child(6) {
font-size: 0.8em !important;
}
(the 'text:nth-child' value dictates which element to change, i.e. text:nth-child(8) and text:nth-child(9) represents the labels)
Be gentle on me as this is my first post!
So I've been having some issues trying to get the 'Particle.JS' to work. When checking the console, it says "ParticleJS is not defined", but I defined the id as 'particles'. Very grateful for the help, in future ref.
<div class="wrapper">
<div class="canvas">
<div id="particles">
<h1>We Love <span class="rotate">Simple, Responsive, Minimal, Fun</span></h1>
</div>
</div>
</div>
<script src="js/particles.js"></script>
.wrapper h1 {
font-size: 55px;
font-weight: 100;
margin-top:15%;
}
.canvas{ width:100%; height:95%; background:url(../img/banner.jpg) center; background-size:cover; position:relative; overflow:hidden;}
#particles {z-index: 4;height: 100%;height: 100vh;}
particlesJS('particles', {
particles: {
color: '#fff',
color_random: false,
shape: 'triangle', // "circle", "edge" or "triangle"
opacity: {
opacity: 1,
anim: {
enable: true,
speed: 1.5,
opacity_min: 0,
sync: false
}
you must be initialize your particle.js script first, then only you initialize another scripts