1216 include all preview browse products in detail tab

[juzen2003]

• Fixes #1216
• Were any Django, import pipeline, or table_schema files modified? N
  • If YES:
  • Database used: opus3_test_220530
  • All Django tests pass: Y
  • FLAKE8 run on modified code: Y
• Were any JavaScript or CSS files modified? Y
  • If YES:
  • JSHINT run on all affected files: Y
  • Tested on Chrome, Firefox, Safari, Edge, and iOS: Y (Remember to test all browser sizes)
  • Tested for race conditions (with delayed API calls if applicable): NA
• Was the documentation reviewed for necessary changes or additions? NA
  • About
  • Getting Started
  • FAQ
  • API Guide
  • Tooltips

Description of changes:

• Use jquery plugin FlexSlider to display multiple preview images in detail tab
• Update CSS for responsiveness
• In detail tab, wrap the overflow text of the detail entry values when window size is small. This will solve the issue of left metadata container taking up too much space and preview image is cut off when the browser is narrow. (ex: co-rss-occ-2008-039-rev058c-x43-i)

[rfrenchseti]

Is there some way to make the dots a little closer together so when we look at RSS occultations they don't go to two lines?

[juzen2003]

Now the dots will stay in one line when the screen is narrow and preview image is in the right container.

[juzen2003]

Fixed the twitching issue when the cursor is at the border of preview image and "<" & ">" buttons by updating the stylings to make sure "<" & ">" stay in the same container of the preview image. The twitching issue is the caused by the transition animation. When the positions of "<" & ">" at the beginning of the animation are outside of the main container of the preview image (the target we want to apply the carousel), if we mouse over the cursor to those non-overlapping area, the twitching issue will happen.

[dstopp]

• Is there a way to make the prev/next arrows smaller when the screen is resized? the dots as well? they seem disproportionately big.

• When the screen is approx 730x560, the arrows are not evenly placed on either side and they are on top of the image

[juzen2003]

• Since we don't want "<" & ">" buttons to overlap with detail preview image, now "<" & ">" are positioned at both sides of the image without transition animation. (With transition animation, those buttons will easily overlapped with the image, there is no enough width for animation when screen is narrow). The size of "<" & ">" will also change based on the screen width.

• When detail preview image moves to the top, position "<" & ">" near the image instead of the edges of the screen. Shrink the size of "..." when screen is getting narrower.

[juzen2003]

Show the preview detail image arrow buttons after they are properly positioned.