I've been trying to use slick slider and I am running into a small issue. I have two sections where I want to use the slider. First one is just the "fade" effect with one picture and the second one is testimonial slider. Now the issue is if I want to have a margin between my testimonials and I use:
.slick-slide {
margin: 0px 10px;
}
See picture of margin between the testimonials
HTML Markup -
<div class="slider">
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>This is the only Norskkurs to take in Stavanger if value for
money and truly progressing with
the Norwegian are important factors for you.
</h3>
<strong>Jessica Morris</strong>
<p>A1/A2 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>Very hands on and animated. Relaxed atmosphere which is
perfect for feeling comfortable in a new language setting.
</h3>
<strong>Helen Brian</strong>
<p>A2 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>This course is a wonderful journey with lots of fun and
activities towards the goal. It's a well
designed course for learning.
</h3>
<strong>Chidabaram Harikumar</strong>
<p>A1/A2/B1 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>It is first language course which I have lasted more than one month :) . It means alot to me. They
teach with both their heart and brain.
</h3>
<strong>Amir Ghaderian</strong>
<p>A2/B1 Student</p>
</div>
</div>
<div class="testimonial-container">
<div class="testimonial-img">
<img src="images/face.jpg" alt="face">
</div>
<div class="testimonial-text">
<h3>One of the best thing which I have done in my life is to join Norskkurs in LNS.It's a great place to
learn the language with good people.
</h3>
<strong>Dayanand Mohanasundram</strong>
<p>A1/A2 Student</p>
</div>
</div>
</div>
Now with my next "fade" slide I don't want the margin but it will still add the same .slick-slide properties to all the slides I use.
Is there anyway I can only apply this to one slide or remove this class/property from other slides?
In short, I only need margin between testimonials slide and not the other one. How can I get around this?
you can add a class testimonials to the testimonials slider and add margin to this class.
.testimonial-slide {
margin: 0px 10px;
}
I'd suggest updating your HTML structure if it's not updated. You can use BEM https://en.bem.info/methodology/ in order to not fall in such traps.
If you have 4 sliders you might have the following HTML:
<div class="slider">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-testimonials">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-faq">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
<div class="slider-people">
<div class="slider__slides">
<div class="slider__slide"></div>
</div>
</div>
So there won't be a problem to style each slider__slide per slider.
.slider-testimonials .slider__slide { margin: 0 10px; }
Then, the above margin won't be applied to the other sliders.
If you need to share a style among all slider__slide elements.
You can do the following:
.slider__slide { box-shadow: 0 0 0 black; } for example.
I hope that helps.
Related
I have found many examples for different circumstances, but im just not experienced enough to combine them and accomplish the result I want. I am trying to create a TamperMonkey/GreaseMonkey script to highlight a DIV that matches a particular image source.
The website code is as follows, I cannot change it, but I removed the URL for the image and excess code so its easier to read:
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Im looking for code to search for image-source-#, and change the background color of the listing-row DIV when I find it (for example, search for image-source-2.jpg and change listing_row to green).
$('img[src="image-source-2.jpg"]').parent().css('background-color','red');
div{
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work.
I try to solve it for hour, but I don't understand the problem. You can find the site here.
And you can find the JSFiddle here.
Here there are the part html:
<div class="section" id="section5">
<div class="slide" id="slide1">
<div class="intro">
<h1>#your Led Solution 1 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
<img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>#your Led Solution 2 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit & LED indicator lamps with integrated pulse</p>
<img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
.fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.
Hi I have this piece of code that I would modify
<section id="imgTestata1" style="background-color:#f7f7f7; color:#ffffff; background-image:url(../asset/images/scatti/home1.jpg); padding-top:290px; padding-bottom:0px; background-position:Right top; background-size:cover;">
<div class="row-inner row-inner-full">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="colored-box wpb_animate_when_almost_visible wpb_bottom-to-top" style="max-width:550px; padding:35px 45px 50px; margin-left:40px;">
<img src="../asset/images/logo_trasparente.png" style="width:100%" />
</div>
<div class="vc_spacer" style="height:40px"></div>
<div class="sticky_navigation_wrapper">
<div class="sticky_navigation">
<div class="sn_inner">
<a href="#wrapper">
<div class="to_top"><i class="fa fa-caret-up"></i></div>
</a>
<ul>
<li>Innovazione</li>
<li>What's inside</li>
<li>Our Team</li>
<li>Features</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to add a javascript function that can allow me change the background image in the section named "imgTestata1"
Thanks
Not sure if you want to change the image or scroll it (probably the first)? Anyway:
Continuously scroll a div background image by animating its X position To scroll
http://www.jqueryscript.net/slideshow/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js.html To autochange it, demo here
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js/
i need to develop a slider / carousel like this exactly you can see the example in the site
i pasted the code and tried to study it but i got lost with scripts and the divs background not loaded!
simply i need to sliding three or more divs with custom pagination float on and every div is stretched to the browser page with background image cover like the example i mentioned before. Thank you
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" >
<div class="slider-item__wrap" data-item-count="" >
<div class="slide current" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
DYNAMISM
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>CREATED TO MASTER THE ROAD</p>
</div>
<div class="content__descr">
<p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure. </p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
Alfa D.N.A.
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>DYNAMIC CONTROL</p>
</div>
<div class="content__descr">
<p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic, for performance, Natural for optimum fuel economy and All-Weather for tackling bad weather and low grip conditions.</p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide">
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
<div class="model-item__row">
<div class=" model__content pos--right">
<h2 class="content__title">
SUSPENSION
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>FEEL THE ROAD</p>
</div>
<div class="content__descr">
<p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- END contenitore elemento con scroll orizzontale -->
<!-- START Menu per scroll orrizzontale -->
<div class="slider-menu">
<ul class="slider-menu__items">
<li class="active" data-adobe="content::dynamism">
DYNAMISM
</li>
<li data-adobe="content::alfadna">
Alfa D.N.A.
</li>
<li data-adobe="content::suspension">
SUSPENSION
</li>
</ul>
</div>
<!-- END Menu per scroll orrizzontale -->
<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>
please check this link : https://jsfiddle.net/IA7medd/osdLso66/
HTML :
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
</div>
</div>
</div>
</div>
</div>
The style of each item in the slider which you can change its height :
.item{
height:350px;
background-position: center center;
background-size: cover;
}
This is the necessary plugins for the slider :
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css
and finally the slider script :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
});
});
I'm working on this code example of collapsible text.
jsfiddle Link
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(document)
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
There is a issue with the code when i expand the first row. When I click on one row arrow animation is activated also on all rows. How I can prevent this?
Because you use this:
$('.arrow').toggleClass('down');
This will toggle the class for all elements with arrow class
You want to limit it to the question being clicked on
$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');
Updated Fiddle