Slideshow Not clickable with link

Tourist
17 0 0

Could anyone offer assistance in making my slideshow clickable depending on the slide?

 

My site is http://limnclothing.com

 

I've trawled through a-lot of pages on here which generally apply to the Brooklyn theme. Ive added snippets of code  from these threads but they don't seem to work, specifically for my slideshow/carousel . any assistance would be appreciated

0 Likes

Hi,

 

When editing individual slides in the Brooklyn theme, you should have the opportunity to add a button with a link and a label. Does this not fit the bill or are you trying to make the entire slide clickable?

 

Regards,

Tom


Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes
Tourist
17 0 0

Im not actually using the Brooklyn theme,  so all of the guides on the internet reference that theme. but it doesn't translate all over.

 

my slideshow does however have a button link but i have removed  the text so it is not shown, because it was to small and it wouldn't let me decide where to move the button. I would just like the whole slide to be clickable.

0 Likes

Did you write the code for the slideshow yourself or did you get from someplace?

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes

It looks like you're using Owl Carousel.

 

To create links, wherever you added the <div> tags with the class .owl-item in your theme files, replace them with <a> tags and add an href attribute with the link url.

 

E.g.:

<div class="owl-item">
  slider content...
</div>

becomes:

<a href="/collections" class="owl-item">
  slider content...
</a>

Regards,

Tom

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes
Tourist
17 0 0

thankyou for the response much appreciated. It worked but it grouped all the slides under the same link. is there a way to individually link the slides?

 

i altered a div lower down with the tag, and 2 rectangle buttons would appear as the link on the slide, which highlighted as i hovered over the button.

0 Likes
Tourist
17 0 0

someplace

0 Likes

Hmmm... that's odd.

 

According to Owl Carousel's docs, you should be able to replace the following:

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

With:

<div class="owl-carousel">
  <a href="link"> Your Content </a>
  <a href="link1"> Your Content </a>
  <a href="link2"> Your Content </a>
  <a href="link3"> Your Content </a>
  <a href="link4"> Your Content </a>
  <a href="link5"> Your Content </a>
  <a href="link6"> Your Content </a>
</div>

Just be sure that the <a> tags are direct children of the element with the '.owl-carousel' class.

 

If your problem is that all of the links are the same, that may be because your slides are being created inside a liquid 'for loop'.

 

If you still can't sort it out, post your code (the element with the '.owl-carousel' class and everything inside) and we should be able to get to the bottom of it.

 

 

Regards,

Tom

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes
Tourist
17 0 0

 

Yeah i think my carousel is slightly different.

 

this is the code below, as you can see it has the edited <a> included which made the whole slideshow link

 

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {% if section.blocks.size > 0 %}
  <div class="slideshow-section {% if section.settings.slide_fullscreen == '1' %}full-screen-slider{% endif %}">
    <div class="data-slideshow"  
         data-auto="{{ section.settings.auto_speed }}"
         data-paging="{{ section.settings.slide_pagination }}"
         data-nav="{{ section.settings.slide_navigation }}"
         data-transition="{{ section.settings.slide_transition }}"
         data-prev='{{ section.settings.slide_nav_prev }}' 
         data-next='{{ section.settings.slide_nav_next }}' style="display: none;"></div>
    <a href="/collections" class="slideshow owl-carousel">
      {% for block in section.blocks %}
      <div class="item item-mousemove-translate" style="background: url({{ block.settings.background_image | img_url: 'master' }}) center center no-repeat;background-size: cover; height: 95vh;">
        <div class="container" style="position:relative; height: 100%">
          <div class="content {{ block.settings.class_content }}">
              {% if block.settings.use_content_image %}
              <a href="/collections" class="content-image">
                <img src="{{ block.settings.content_image_slider | img_url: 'master' }}">
              </a>
              {% endif %}
            <div class="content-area">
              {% if settings.language_enable %}
              <div class="lang1">{{ block.settings.content1 | split: '[lang2]' | first }}</div>
              <div class="lang2">{{ block.settings.content1 | split: '[lang2]' | last }}</div>
              {% else %}
              {{ block.settings.content1 | split: '[lang2]' | first }}
              {% endif %}
              {% if settings.language_enable %}
              <div class="lang1">{{ block.settings.content2 | split: '[lang2]' | first }}</div>
              <div class="lang2">{{ block.settings.content2 | split: '[lang2]' | last }}</div>
              {% else %}
              {{ block.settings.content2 | split: '[lang2]' | first }}
              {% endif %}
              {% if settings.language_enable %}
              <div class="lang1">{{ block.settings.content3 | split: '[lang2]' | first }}</div>
              <div class="lang2">{{ block.settings.content3 | split: '[lang2]' | last }}</div>
              {% else %}
              {{ block.settings.content3 | split: '[lang2]' | first }}
              {% endif %}
              {% if settings.language_enable %}
              <div class="lang1">{{ block.settings.button_content | split: '[lang2]' | first }}</div>
              <div class="lang2">{{ block.settings.button_content | split: '[lang2]' | last }}</div>
              {% else %}
              {{ block.settings.button_content | split: '[lang2]' | first }}
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </a>
  </div>
  {% endif %}
</div>
{% schema %}
{
"name": "Slideshow",
"class": "index-section index-section--flush",
"max_blocks": 4,
"settings": [ 
{
"type": "text",
"id": "auto_speed",
"label": "Autoplay",
"info": "If you would like the slider to auto-rotate, then set the autoplay rotate time in ms here. I.e. you would enter '5000' for the slider to rotate every 5 seconds.",
"default": "5000"
},

  

0 Likes
Yes you have the 'a' tag on the entire slideshow. Change that back to a div, then change the div inside that to an a (the one with the 'item' class).

Regards,
Tom
Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
0 Likes