Search found 2 matches for js

slider

Niko wrote:Hello @yaanz

first of all place the #html code where you want the slider to be displayed:

Code:

<div id="cbp-contentslider" class="cbp-contentslider">
               <ul>
                  <li id="slide1" style="display: list-item; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out; left: 0%;">
                     <h3 class="icon-wolf">Wolf</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Veggies sunt bona vobis, proinde vos postulo esse magis desert raisin bush tomato soko salsify garbanzo horseradish cabbage burdock.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide2" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out; left: 100%;">
                     <h3 class="icon-rabbit">Rabbit</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide3" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-aligator">Aligator</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Tomato shallot broccoli rabe aubergine melon fava bean soybean sorrel. Tomatillo plantain wattle seed pea ricebean sorrel fennel welsh onion kakadu plum celery. Arugula radicchio garlic welsh onion kale celtuce tomato fava bean beet greens soybean burdock groundnut lentil broccoli rabe.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide4" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-turtle">Turtle</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Yarrow bush tomato beetroot taro water chestnut komatsuna azuki bean. Parsnip artichoke water chestnut caulie carrot grape summer purslane brussels sprout fava bean tomatillo pea groundnut nori earthnut pea tigernut. Tigernut brussels sprout wakame tomatillo radicchio carrot maize swiss chard seakale melon grape broccoli pea sprouts kakadu plum plantain cauliflower. Gram salsify radicchio daikon courgette rock melon bunya nuts turnip greens. Cabbage black-eyed pea spinach asparagus plantain cress soybean spring onion salad artichoke pea garlic silver beet grape water spinach zucchini wakame summer purslane.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide5" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-platypus">Platypus</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Potato watercress burdock spinach quandong jícama chard pea sprouts garlic celery turnip daikon kale lotus root sorrel coriander rock melon cabbage. Epazote salsify lentil rock melon eggplant cauliflower zucchini caulie catsear broccoli rabe pumpkin lettuce okra green bean squash seakale onion water chestnut. Sweet pepper peanut corn soko celery winter purslane.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
               </ul>
               <nav>
                  <a href="#slide1" class="icon-wolf rc-active" style="width: 20%;"><span>Wolf</span></a>
                  <a href="#slide2" class="icon-rabbit" style="width: 20%;"><span>Rabbit</span></a>
                  <a href="#slide3" class="icon-aligator" style="width: 20%;"><span>Aligator</span></a>
                  <a href="#slide4" class="icon-turtle" style="width: 20%;"><span>Turtle</span></a>
                  <a href="#slide5" class="icon-platypus" style="width: 20%;"><span>Platypus</span></a>
               </nav>
            </div>

Then you will have to add some #js codes, I would suggest you to go to ACP > General > Forum promotion > Search engines and adding a new Additional tags

• Add type: Javascript
  
• "src" attribute: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  

and do the same for:

1. 
   
   • Add type: Javascript
     
   • "src" attribute: http://tympanus.net/Blueprints/ElasticContentSlider/js/jquery.cbpContentSlider.min.js
     

• Add type: Javascript
  
• "src" attribute: http://tympanus.net/codrops/adpacks/demoad.js
  

• Add type: Link a css sheet
  
• "href" attribute: http://tympanus.net/Blueprints/ElasticContentSlider/css/component.css
  

then create a new js code in Modules > Javascript management panel

• Title: up to you
  
• Where: all pages
  
• Code:
  

  Code:

  
         $(function() {
            /*
            - how to call the plugin:
            $( selector ).cbpContentSlider( [options] );
            - options:
            {
               // default transition speed (ms)
               speed : 500,
               // default transition easing
               easing : 'ease-in-out',
               // current item's index
               current : 0
            }
            - destroy:
            $( selector ).cbpContentSlider( 'destroy' );
            */

            $( '#cbp-contentslider' ).cbpContentSlider();
         });
      

  
  
  

---

This should be all

Let me know

slider

Code:

<div id="cbp-contentslider" class="cbp-contentslider">
               <ul>
                  <li id="slide1" style="display: list-item; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out; left: 0%;">
                     <h3 class="icon-wolf">Wolf</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Veggies sunt bona vobis, proinde vos postulo esse magis desert raisin bush tomato soko salsify garbanzo horseradish cabbage burdock.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide2" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out; left: 100%;">
                     <h3 class="icon-rabbit">Rabbit</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Chicory collard greens tatsoi cress bamboo shoot broccoli rabe lotus root earthnut pea arugula okra welsh onion leek shallot courgette. Chard garlic fava bean pea sprouts gram spinach plantain tomatillo. Chicory garlic black-eyed pea gourd chickpea cucumber lotus root.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide3" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-aligator">Aligator</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Tomato shallot broccoli rabe aubergine melon fava bean soybean sorrel. Tomatillo plantain wattle seed pea ricebean sorrel fennel welsh onion kakadu plum celery. Arugula radicchio garlic welsh onion kale celtuce tomato fava bean beet greens soybean burdock groundnut lentil broccoli rabe.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide4" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-turtle">Turtle</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Yarrow bush tomato beetroot taro water chestnut komatsuna azuki bean. Parsnip artichoke water chestnut caulie carrot grape summer purslane brussels sprout fava bean tomatillo pea groundnut nori earthnut pea tigernut. Tigernut brussels sprout wakame tomatillo radicchio carrot maize swiss chard seakale melon grape broccoli pea sprouts kakadu plum plantain cauliflower. Gram salsify radicchio daikon courgette rock melon bunya nuts turnip greens. Cabbage black-eyed pea spinach asparagus plantain cress soybean spring onion salad artichoke pea garlic silver beet grape water spinach zucchini wakame summer purslane.</p>
                        </div>
                     </div>
                  </li>
                  <li id="slide5" style="display: none; transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out;">
                     <h3 class="icon-platypus">Platypus</h3>
                     <div>
                        <div class="cbp-content">
                           <p>Potato watercress burdock spinach quandong jícama chard pea sprouts garlic celery turnip daikon kale lotus root sorrel coriander rock melon cabbage. Epazote salsify lentil rock melon eggplant cauliflower zucchini caulie catsear broccoli rabe pumpkin lettuce okra green bean squash seakale onion water chestnut. Sweet pepper peanut corn soko celery winter purslane.</p>
                           <p>Daikon artichoke gumbo azuki bean bok choy avocado winter purslane gram earthnut pea broccoli salsify squash plantain wattle seed wakame broccoli rabe bamboo shoot. Zucchini lotus root azuki bean epazote dulse pumpkin rutabaga spinach. Endive mung bean gumbo maize plantain rock melon.</p>
                        </div>
                     </div>
                  </li>
               </ul>
               <nav>
                  <a href="#slide1" class="icon-wolf rc-active" style="width: 20%;"><span>Wolf</span></a>
                  <a href="#slide2" class="icon-rabbit" style="width: 20%;"><span>Rabbit</span></a>
                  <a href="#slide3" class="icon-aligator" style="width: 20%;"><span>Aligator</span></a>
                  <a href="#slide4" class="icon-turtle" style="width: 20%;"><span>Turtle</span></a>
                  <a href="#slide5" class="icon-platypus" style="width: 20%;"><span>Platypus</span></a>
               </nav>
            </div>

• Add type: Javascript
  
• "src" attribute: https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

1. • Add type: Javascript
     
   • "src" attribute: http://tympanus.net/Blueprints/ElasticContentSlider/js/jquery.cbpContentSlider.min.js

• Add type: Link a css sheet
  
• "href" attribute: http://tympanus.net/Blueprints/ElasticContentSlider/css/component.css

then create a new js code in Modules > Javascript management panel

• Title: up to you
  
• Where: all pages
  
• Code:
  

  Code:

  
         $(function() {
            /*
            - how to call the plugin:
            $( selector ).cbpContentSlider( [options] );
            - options:
            {
               // default transition speed (ms)
               speed : 500,
               // default transition easing
               easing : 'ease-in-out',
               // current item's index
               current : 0
            }
            - destroy:
            $( selector ).cbpContentSlider( 'destroy' );
            */

            $( '#cbp-contentslider' ).cbpContentSlider();
         });
      

---

This should be all

Let me know