title: Change image with <picture> and js
body: <p>I have a small slider that switches the <code>preview</code> image to the <code>main</code> image. It works fine now</p>
  <p><em>blade.php</em></p>
  <pre><code>&lt;div class=&quot;custom-carousel-section&quot;&gt;
    &lt;div class=&quot;custom-container&quot;&gt;
      &lt;div class=&quot;custom-carousel&quot;&gt;
        @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        &lt;div class=&quot;custom-carousel__title&quot;&gt;
          @if($loop-&gt;first)
            &lt;span&gt;{{ $article_block_image-&gt;title }}&lt;/span&gt;
          @endif
        &lt;/div&gt;
        @endforeach @endif
        @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
        &lt;div class=&quot;main-image&quot;&gt;
        @if($loop-&gt;first)
            &lt;img src=&quot;{{ $article_block_image-&gt;main_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
        @endif
        &lt;/div&gt;
        @endforeach @endif
        &lt;div class=&quot;img-to-select&quot;&gt;
          @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
          &lt;div @if($loop-&gt;first) class=&quot;img-to-select__item  selected&quot; @else class=&quot;img-to-select__item&quot; @endif&gt;
            &lt;img src=&quot;{{ $article_block_image-&gt;preview_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot; data-main-src=&quot;{{ $article_block_image-&gt;main_image }}&quot;&gt;
          &lt;/div&gt;
          @endforeach @endif
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>js</em></p>
  <pre><code>$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  $('.main-image &gt; img').attr('src', $(this).children('img').data('main-src'));
  $('.custom-carousel__title &gt; span').html($(this).children('img').attr('data-title'));
  });
  </code></pre>
  <p>But I still have a picture <code>mobile_image</code>, and I want the <code>mobile_image</code> to change instead of <code>main_image</code> at the maximum size of 576px, for this I use <code>&lt;picture&gt;</code></p>
  <p>I change my code to like this</p>
  <pre><code>&lt;div class=&quot;main-image&quot;&gt;
  @if($loop-&gt;first)
  &lt;picture&gt;
    &lt;source srcset=&quot;{{ $article_block_image-&gt;mobile_image }}&quot; media=&quot;(max-width: 576px)&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
    &lt;source srcset=&quot;{{ $article_block_image-&gt;main_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
    &lt;img src=&quot;{{ $article_block_image-&gt;main_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
  &lt;/picture&gt;
  @endif
  &lt;/div&gt;
  </code></pre>
  <p>But my slider just stops working</p>
  <p>The main image eventually changes to mobile, but the slider itself does not switch</p>
  <p>In this case, the preview images also echo, but the main image itself does not change</p>
  <p>My slider essentially works like this</p>
  <blockquote>
  <p><a href="https://jsfiddle.net/a9yvdu75/" rel="nofollow noreferrer">https://jsfiddle.net/a9yvdu75/</a></p>
  </blockquote>
  <p>I just need to put what in the <code>main-image</code> class in <code>&lt;picture&gt;</code> and change the image depending on the screen size</p>