slider
3 posters
Page 1 of 1
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 ..
i want to add a slider like this ..
http://tympanus.net/Blueprints/ElasticContentSlider/ ( here is example )
thank you waiting for quick response sir ..
Re: slider
Hello @yaanz
first of all place the #html code where you want the slider to be displayed:
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
and do the same for:
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
This should be all
Let me know
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:
- Add type: Javascript
- "src" attribute: http://tympanus.net/Blueprints/ElasticContentSlider/js/jquery.cbpContentSlider.min.js
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
Re: slider
@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)
the only way I can provide you support is in this topic
(sorry for the doble topic)
Re: 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:
- 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
Re: slider
Do you want it on every page or just the homepage?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: slider
Add it to an announcement which is on every page.
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: slider
bump!
there might b problem with height and width of forum can some one check it out please
thanks
there might b problem with height and width of forum can some one check it out please
thanks
Re: slider
Did you try to add the html code in the index_message?
ACP > Display > Homepage > Generalities
ACP > Display > Homepage > Generalities
Re: slider
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
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum