Making 95% of your content slide from one side to the other

#1

First of all, this is going to be a module for a website eventually – it’s going to be a part of a bigger website. Not a single page itself!

The link is here

It should work this way:

  1. when clicked the left arrow: slowly move the entire content from left to right, and replace content of the former div
  2. when clicked the right arrow: slowly move the entire content from right to left, and replace content of the former div

If you are still confused, here is a simple JS library that exactly works as I need to though it messes my design, and I can’t use it http://kenwheeler.github.io/slick/

Anything that is inside this div will be dynamically changed

<div class="news-body">
    ************
</div>

newsEd.jpg2560×1205 820 KB

Right now, when an arrow is clicked, it only moves a particular box in the middle, which isn’t a big deal to fix, but what’s the best way to dynamically change the entire content of my div without doing something like this:

When an arrow clicked change the entire HTML body to
https://pastebin.com/UfbvGTgz

#2

You can use the Carousel feature of Bootstrap for this.

You can even modify the CSS so instead of sliding, it will fade out from one to the next.

#3

Alright. I really didn’t intend to re-write my code, but I could give it a try. It may eventually be simpler than I think. Thanks for the tip.

#4