The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

slider

View previous topic View next topic Go down

slider

Post by yaanz on June 14th 2015, 4:47 pm

hi

i want to add a slider like this ..

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

thank you waiting for quick response sir ..

yaanz
Forumember

Posts : 58
Reputation : 1
Language : english

http://hoangvietschool.niceboard.com/

Back to top Go down

Re: slider

Post by Niko on June 15th 2015, 11:42 am

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


and do the same for:







  • 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 Wink

    Let me know :rose:

  • Niko
    Hyperactive

    Male Posts : 2163
    Reputation : 93
    Language : English, French, Italian, Spanish, Latin

    https://www.translationscloud.com/?utm_source=forumotion&utm

    Back to top Go down

    Re: slider

    Post by Niko on June 15th 2015, 4:45 pm

    @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 :rose:
    (sorry for the doble topic)

    Niko
    Hyperactive

    Male Posts : 2163
    Reputation : 93
    Language : English, French, Italian, Spanish, Latin

    https://www.translationscloud.com/?utm_source=forumotion&utm

    Back to top Go down

    Re: slider

    Post by yaanz on June 15th 2015, 7:09 pm

    @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


    and do the same for:










  • 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 Wink

    Let me know :rose:


  • 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

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by SLGray on June 15th 2015, 7:14 pm

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


    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.


    SLGray
    Administrator
    Administrator

    Male Posts : 35629
    Reputation : 2372
    Language : English
    Location : United States

    http://fmthemes.forumotion.com/

    Back to top Go down

    Re: slider

    Post by yaanz on June 15th 2015, 7:15 pm

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

    thank you

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by SLGray on June 15th 2015, 7:16 pm

    Add it to an announcement which is on every page.


    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.


    SLGray
    Administrator
    Administrator

    Male Posts : 35629
    Reputation : 2372
    Language : English
    Location : United States

    http://fmthemes.forumotion.com/

    Back to top Go down

    Re: slider

    Post by yaanz on June 15th 2015, 7:20 pm

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

    where i went wrong ?

    thanks

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by yaanz on June 16th 2015, 7:56 pm

    bump!

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

    thanks

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by Niko on June 17th 2015, 3:36 pm

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

    ACP > Display > Homepage > Generalities Wink

    Niko
    Hyperactive

    Male Posts : 2163
    Reputation : 93
    Language : English, French, Italian, Spanish, Latin

    https://www.translationscloud.com/?utm_source=forumotion&utm

    Back to top Go down

    Re: slider

    Post by yaanz on June 17th 2015, 5:26 pm

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

    ACP > Display > Homepage > Generalities Wink


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

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by yaanz on June 19th 2015, 8:58 am

    bump !!

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    Re: slider

    Post by yaanz on June 20th 2015, 7:35 am

    bump !!!

    yaanz
    Forumember

    Posts : 58
    Reputation : 1
    Language : english

    http://hoangvietschool.niceboard.com/

    Back to top Go down

    View previous topic View next topic Back to top


     
    Permissions in this forum:
    You cannot reply to topics in this forum