CODEWITHSUNDEEP
javascriptpaginationcarouselcaroufredsel
Niraj paul
Niraj paul

Reputation: 15

Caroufredsel Pagination: Not numbers but Titles

I am creating a carousel pagination using Caroufredsel plugin. I want to create custom unique Titles rather than the default numbers in the pagination. I want each Title to be totally different. At the moment I managed to use "anchorBuild" to add in aplphabetical Titles (e.g. test) but not completely different Titles. Your help will be appreciated!

    $('#foo0').carouFredSel({
      auto: { duration: 600 },
      pagination: {
        container:".menu",
        anchorBuilder: function(nr) { return '<li><a href="#"><span>Test '+nr+'</span></a></li>';}
      },
      mousewheel: true,
      swipe: { onMouse: true },
    });

<ul class="menu">
  <li><a href="#environment">Environment</a></li>
  <li><a href="#market">Marketplace</a></li>
  <li><a href="#community">Community</a></li>
  <li><a href="#workplace">Workplace</a></li>
</ul>

Upvotes: 1

Views: 4099

Answers (1)

pschueller
pschueller

Reputation: 4427

According to the plugin's documentation (older docs are found here) you can simply set achorBuilder: false and then use your own HTML markup with custom titles.

So something like this for your HTML (note: I added <span>s to match the docs):

<ul class="menu">
  <li><a href="#Environment"><span>Environment</span></a></li>
  <li><a href="#Marketplace"><span>Marketplace</span></a></li>
  <li><a href="#Community"><span>Community</span></a></li>
  <li><a href="#Workplace"><span>Workplace</span></a></li>
</ul>

And then your jQuery:

$('#carousel').carouFredSel({
    auto: {
        duration: 600
    },
    pagination: {
        container: ".menu",
        anchorBuilder: false
    },
    mousewheel: true,
    swipe: {
        onMouse: true
    }
});

Here is a working jsfiddle.

Upvotes: 1

Related Questions