1

I want to target image in this html so I can adjust it for mobile devices, because I have problems with this slider.

Here is the code:

<section class="main-slider style-two">
        <div class="rev_slider_wrapper fullwidthbanner-container"  id="rev_slider_one_wrapper" data-source="gallery">
            <div class="rev_slider fullwidthabanner" id="rev_slider_one" data-version="5.4.1">
                <ul>

<!-- Slide 1 -->
<li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmodern="off" data-index="rs-1680" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="images/web_pohľad.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                        
<img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="images/web_pohlad.jpg">

Thank you for your answers!

denisek19
  • 11
  • 2
  • Target in what way? With CSS? `.main-slider li:first-child img` would be enough I guess. – Mr Lister Nov 26 '19 at 10:21
  • Does this answer your question? [How to detect a page request is from mobile or desktop client side](https://stackoverflow.com/questions/8760143/how-to-detect-a-page-request-is-from-mobile-or-desktop-client-side) – pringi Nov 26 '19 at 10:31

2 Answers2

0

Some basic techniques to target the images as you described it.

More about selectors can be found here: https://drafts.csswg.org/selectors-3/

/* directly speak to the image -- im not sure this is correct but this is the only img tag in the HTML you provided. */
.rev-slidebg {

}

/* all images within the rev_slider class */
.rev_slider img {

}

/* All images within the rev_slider with the style-two section */
.style-two .rev_slider img {

}
<section class="main-slider style-two">
        <div class="rev_slider_wrapper fullwidthbanner-container"  id="rev_slider_one_wrapper" data-source="gallery">
            <div class="rev_slider fullwidthabanner" id="rev_slider_one" data-version="5.4.1">
                <ul>

<!-- Slide 1 -->
<li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmodern="off" data-index="rs-1680" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="images/web_pohľad.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                        
<img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="images/web_pohlad.jpg">
Arno Tenkink
  • 1,480
  • 2
  • 9
  • 16
0

use below code to get image using jquery.

jquery CODE :

$(document).ready(function(){ $your_img = $('#rev_slider_one_wrapper').find("ul").find("li").find("img"); });

CSS CODE :

#rev_slider_one_wrapper ul li img{ //write css code for image }

Nishant Thummar
  • 1
  • 1