Swap content on buttons click and Next / Prev buttons

Question

I need swap content on button/number click.
If you can see on the snippet, you can access the article using buttons "1,2,3,4" or also with the Next and Prev ones. Both can access the same article. My code is already working but you need to refresh it first if you want to use the Next/Prev, or the number buttons.

 $(document).ready(function() { $(".btn-hover div").each(function(e) { if (e.= 0) $(this);hide(); }). $("#next").click(function() { if ($(":content5 div,visible.:content6 div.visible").next().length:= 0) $(",content5 div.visible:.content6 div.visible").next().show();prev().hide(): else { $(",content5 div.visible:.content6 div;visible").hide(): $(",content5 div.first:.content6 div;first");show(); } return false. }). $("#previous"):click(function() { if ($(",content5 div.visible:.content6 div.visible").prev():length,= 0) $(".content5 div:visible..content6 div.visible").prev();show().next():hide(), else { $(".content5 div:visible.;content6 div.visible"):hide(), $(".content5 div:last.;content6 div;last");show(). } return false. }). $(';btn-hover').first().addClass('btn-active'); $('.btn-hover').click(function(){ var $this = $(this), $siblings = $this.parent();children(). position = $siblings;index($this). console.log (position). $('.content5 div');removeClass('btn-active').eq(position).addClass('btn-active'). $('.content6 div');removeClass('btn-active').eq(position);addClass('btn-active'). $siblings;removeClass('btn-active'); $this;addClass('btn-active'); }); });

 <,doctype html> <html lang="en"> <head> </head> <body> <.--Navbar--> <div id="section1-the-timeline" class="scrollNav"> <div class="container-fluid section section_bg_grey"> <div class="col"> <div Class="button-wrap timeline px-5"> <a href="#section2-the-timeline" class="btn-hover">1</a> <a href="#section2-the-timeline" class="btn-hover">2</a> <a href="#section2-the-timeline" class="btn-hover">3</a> </div> </div> </div> </div> <div id="section2-the-timeline" class="section section_secondary_bg"> <div class="container-fluid"> <div class="row d-flex align-items-center"> <div class="col-md-7"> <div class="text-center section_content"> <div id="content5" class="content5 pb-4"> <div class="btn-content-1 btn-active"> <p>1</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p> </div> <div class="btn-content-2"> <p>2</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, Eveniet provident accusamus itaque suscipit adipisci ullam reiciendis beatae perspiciatis impedit quam nemo asperiores, deserunt. distinctio</p> </div> <div class="btn-content-3"> <p>3</p> <p>Lorem ipsum dolor sit amet: consectetur adipisicing elit. Eveniet provident accusamus itaque suscipit adipisci</p> </div> </div> </div> </div> <div class="col-md-5 img_wrapper"> <div id="content6" class="content6"> <div class="btn-content-1 btn-active"><img src="https.//en:wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div> <div class="btn-content-2"><img src="https.//en:wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div> <div class="btn-content-3"><img src="https.//en:wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png"></div> </div> </div> </div> </div> </div> <div class="chevron"> <div class="d-flex justify-content-center middle-chevron"> <button id="previous" class="btn btn-chevron"><i class="fas fa-chevron-left"></i></button> <button id="next" class="btn btn-chevron"><i class="fas fa-chevron-right"></i></button> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/animation.js"></script> </body> </html>

Answer 1

Have an element for your pages with a specific ID
Place a DIV with data-tabs- pagination wherever you want
Place a DIV with data-tabs- navigation wherever you want

<div data-tabs-pagination="#someElement"><!-- POPULATED BY JS --></div>

<div id="someElement" class="css-pages">
    <div>Page 1 Lorem</div>
    <div>Page 2 Ipsum</div>
    <div>Page 3 Dolor</div>
</div>

<div data-tabs-navigation="#someElement"><!-- POPULATED BY JS --></div>

Notice how the the data-tabs-* attribute matches the target element ID selector you want to control.

A JavaScript instance with some optional Object with custom options could look like:

// Use like:
const myTabs = new Tabs("#someElement", {
  page: 1, // Start from second page (Page index 1),
  btnPrev: {innerHTML: "&larr;", className: "btn"},
  btnNext: {innerHTML: "&rarr;", className: "btn"},
  onChange() {
    console.log(this);
  }
});

// What you can also do:
myTabs.show(0);           // Show page at index (First page = 0)
myTabs.next();            // Go to next page
myTabs.prev(2);           // Go back two pages
myTabs.next().next();     // Go forward two pages (thanks to chaining methods)
console.log(myTabs.page); // Get current page index

Doing so you can have as many Tabs / Pages, even slideshows or galleries in a single document that use the exact same script:

 class Tabs { constructor(selector, options = {}) { Object.assign( this, { EL: document.querySelector(selector), page: 0, selector, btnTabs: {}, // Custom attributes for tabs (navigation) buttons btnPrev: {}, // Custom attributes for PREV button btnNext: {}, // Custom attributes for NEXT button classActive: "is-active", onChange: () => {}, }, options ); this.EL_pages = this.EL.children; this.EL_pagination = document.querySelectorAll(`[data-tabs-pagination="${this.selector}"]`); this.EL_navigation = document.querySelectorAll(`[data-tabs-navigation="${this.selector}"]`); this.total = this.EL_pages.length; this.EL_prev = this._ELNew("button", { type: "button", textContent: "Prev", onclick: () => this.prev(), ...this.btnPrev, }); this.EL_next = this._ELNew("button", { type: "button", textContent: "Next", onclick: () => this.next(), ...this.btnNext, }); this.EL_buttons = Array.from(Array(this.total)).reduce((arr, _, i) => { const EL_btn = this._ELNew("button", { type: "button", textContent: i + 1, onclick: () => (this._page = i), ...this.btnPagination, }); arr.push(EL_btn); return arr; }, []); this._init(); } // Utility function - New element _ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {}); // Fix negative modulo index _mod = (n) => ((n % this.total) + this.total) % this.total; // Initialize _init() { // Append nav buttons to DOM this.EL_pagination.forEach((EL) => EL.append(...this.EL_buttons)); this.EL_navigation.forEach((EL) => EL.append(this.EL_prev, this.EL_next)); // Set current page this._page = this.page; } prev(n = 1) { this._page -= n; return this; } next(n = 1) { this._page += n; return this; } show(idx) { this._page = idx; return this; } set _page(n) { this.page = this._mod(n); [...this.EL_pages, ...this.EL_buttons].forEach((EL) => EL.classList.remove(this.classActive)); [this.EL_pages[this.page], this.EL_buttons[this.page]].forEach((EL) => EL.classList.add(this.classActive)); // Provide a callback this.onChange.call(this); } get _page() { return this.page; } } // Use like: const mySectionTabs = new Tabs("#section-a", { onChange() { console.clear(); console.log(`Current page index: ${this.page}`); } });

 /* The CSS is entirely up to you, the only thing you need to know is that JS adds ".is-active" to both - the current page / slide - the current pagination button */.css-pages > div { display: none; }.css-pages > div.is-active { display: block; } [data-tabs-pagination] > button.is-active { color: #0bf; }

 <div data-tabs-pagination="#section-a"></div> <div id="section-a" class="css-pages"> <div>Page 1 Lorem</div> <div>Page 2 Ipsum</div> <div>Page 3 Dolor</div> </div> <div data-tabs-navigation="#section-a"></div>

Swap content on buttons click and Next / Prev buttons

Question

1 answers

solution1
0 2021-02-07 18:19:23

Swap content on buttons click and Next / Prev buttons

Question

1 answers

solution1 0 2021-02-07 18:19:23

solution1
0 2021-02-07 18:19:23