slider

hi

i want to add a slider like this ..

http://tympanus.net/Blueprints/ElasticContentSlider/ ( here is example )

thank you waiting for quick response sir ..

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

@yaanz please do not send me private messages or emails to ask support

the only way I can provide you support is in this topic
(sorry for the doble topic)

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

where should i add the # html code ?

i want it to display under the banner/log

please am still a starter ... hope you guide me step by step thanks

Do you want it on every page or just the homepage?

dear sir @slgray i want this in every page ...

thank you

Add it to an announcement which is on every page.

sir as per @niko sir i did the same but nothing changed ..

where i went wrong ?

thanks

bump!

there might b problem with height and width of forum can some one check it out please

thanks

Did you try to add the html code in the index_message?

ACP > Display > Homepage > Generalities

Niko wrote:Did you try to add the html code in the index_message?

ACP > Display > Homepage > Generalities

yes i tried but still nothing just a blue box comes up

bump !!

bump !!!