<p>Maybe use a smarter slider? I frequently use <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick</a>, which will only initialise when the number of items is > 1.</p>

<p>In addition, within my template code I would only include the markup required only for the slider if the number of slides is > 1, as I like to keep my markup clean. Something like:</p>

<pre><code>  {% if entry.hero|length &gt; 1 %}&lt;div class="hero-slider"&gt;{% endif %}
    // Hero / Slider markup goes here…
  {% if entry.hero|length &gt; 1 %}&lt;/div&gt;{% endif %}
</code></pre>

CC BY-SA 3.0
2017-01-12T12:47:00.547Z
Hi. Thanks for this but I don't know exactly which template i'd put that into to make that potentially work!
Jacqui
CC BY-SA 3.0
2017-01-12T15:18:13.647Z
I would guess it's in a partial, though it could also be directly in the default (homepage) template; index.html or index.twig. It's impossible to say, as like all Craft sites the template is custom built for your site.
Seth Warburton
CC BY-SA 3.0
2017-01-12T11:54:56.517Z
2017-01-12T11:54:56.517Z
Seth Warburton
<p>If you no longer want the slider to be a slider, you can remove the relevant javascript and then it should just do nothing.
It's hard to say exactly what javascript to remove as you haven't provided all of it.</p>

<p>Additionally, you may want to alter the asset field settings to only allow 1 image in this field otherwise multiple could be output.</p>

CC BY-SA 3.0
2017-01-12T12:13:32.000Z
I'm struggling to see which java is relevant to the slider. I'm coming across it everywhere!! 

The asset image field is limited to 1 image.
Jacqui
CC BY-SA 3.0
2017-01-12T17:17:49.930Z
Hard to help when you can't see any JS! I would search the project with a "find in files" method to look for "heroslider" and see what comes up.
joep
CC BY-SA 3.0
2017-01-12T11:59:01.663Z
2017-01-12T11:59:01.663Z
joep
<p>We've got a HeroSlider on our website, and I no longer wish for the slider to slide (if that makes sense?). </p>

<p>Currently the homepage is 3 slides, however when I remove the 2 slides I don't want, the 1st slide still tries to slide, and in doing so disappears.</p>

<p>I need it to be static.</p>

<p>As far as I can see the code for the slider is:</p>

<pre><code>        var $heading    = $('.heroslider-text h2');
        var $para       = $('.heroslider-text p');
        var $btn        = $('.heroslider-text .btn');

        // Define animation sequence for hero elements.
        if($para.length){
            this.seq = [
                { elements: $heading, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { duration: 250 } },
                { elements: $para, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60, duration: 250, sequenceQueue: false } },
                { elements: $btn, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60,  duration: 250, sequenceQueue: false } }
            ];
        } else {
            this.seq = [
                { elements: $heading, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { duration: 250 } },
                { elements: $btn, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60,  duration: 250, sequenceQueue: false } }
            ];
        }

    };

    this.runSequence = function(){
        if($('.heroslider-text').hasClass('animated')){
            $.Velocity.RunSequence(this.seq);
        }
    };
};
</code></pre>

<p>Thank you very much.</p>

CC BY-SA 3.0
2017-01-12T15:38:03.107Z
I am voting to close because this question is not Craft CMS specific.
Aaron Berkowitz
<templating><frontend>
How to stop a Slider
# How to stop a Slider

(Asked by: username_0 on 2017-01-12)

We've got a HeroSlider on our website, and I no longer wish for the slider to slide (if that makes sense?). 
Currently the homepage is 3 slides, however when I remove the 2 slides I don't want, the 1st slide still tries to slide, and in doing so disappears.
I need it to be static.
As far as I can see the code for the slider is:
        var $heading    = $('.heroslider-text h2');
        var $para       = $('.heroslider-text p');
        var $btn        = $('.heroslider-text .btn');

        // Define animation sequence for hero elements.
        if($para.length){
            this.seq = [
                { elements: $heading, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { duration: 250 } },
                { elements: $para, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60, duration: 250, sequenceQueue: false } },
                { elements: $btn, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60,  duration: 250, sequenceQueue: false } }
            ];
        } else {
            this.seq = [
                { elements: $heading, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { duration: 250 } },
                { elements: $btn, properties: { opacity: [1, 0], translateY:[0, 50] }, options: { delay:60,  duration: 250, sequenceQueue: false } }
            ];
        }

    };

    this.runSequence = function(){
        if($('.heroslider-text').hasClass('animated')){
            $.Velocity.RunSequence(this.seq);
        }
    };
};

Thank you very much.

**Tags:** templating, frontend

> **Comments:**
> **username_1**: I am voting to close because this question is not Craft CMS specific.  

---

## 2 answers

### Answer by username_2 on 2017-01-12. Score: 1

Maybe use a smarter slider? I frequently use Slick, which will only initialise when the number of items is > 1.
In addition, within my template code I would only include the markup required only for the slider if the number of slides is > 1, as I like to keep my markup clean. Something like:
  {% if entry.hero|length > 1 %}{% endif %}
    // Hero / Slider markup goes here…
  {% if entry.hero|length > 1 %}{% endif %}

> **Comments:**
> **username_0**: Hi. Thanks for this but I don't know exactly which template i'd put that into to make that potentially work!  
> **username_2**: I would guess it's in a partial, though it could also be directly in the default (homepage) template; index.html or index.twig. It's impossible to say, as like all Craft sites the template is custom built for your site.  

---

### Answer by username_3 on 2017-01-12. Score: 0

If you no longer want the slider to be a slider, you can remove the relevant javascript and then it should just do nothing.
It's hard to say exactly what javascript to remove as you haven't provided all of it.

Additionally, you may want to alter the asset field settings to only allow 1 image in this field otherwise multiple could be output.

> **Comments:**
> **username_0**: I'm struggling to see which java is relevant to the slider. I'm coming across it everywhere!!   The asset image field is limited to 1 image.  
> **username_3**: Hard to help when you can't see any JS! I would search the project with a "find in files" method to look for "heroslider" and see what comes up.  

---

