As per title, modify the Item Slider js/html/css.
JS changes: remove the js resize/crop and use CSS to manage thumbnail size in container (just like grid view and news view II do). This allows the thumbnail shape to match the rest eg, if its a 300x300 thumbnail, its going to be square in the slider now. This also reduces the page load time by not having to resize/crop slider images.
HTML changes: due to the JS changes, some of the HTML will need to be changed.
CSS changes: due to the JS changes, some of the CSS will need to be changed.
Here are a couple shots from the FINAL tweaks.
JS changes: remove the js resize/crop and use CSS to manage thumbnail size in container (just like grid view and news view II do). This allows the thumbnail shape to match the rest eg, if its a 300x300 thumbnail, its going to be square in the slider now. This also reduces the page load time by not having to resize/crop slider images.
HTML changes: due to the JS changes, some of the HTML will need to be changed.
CSS changes: due to the JS changes, some of the CSS will need to be changed.
- The Image is now the full width of the container and no border around the image itself.
- The Title is now limited to ONE LINE and uses the text-overflow: ellipsis CSS property to trim the title if necessary.
- The description block has been chopped in HALF (was 99px, is now 50px with overflow hidden).
- The description snippet is now 100 instead of 200 and its using the dimmed text style property for the color instead of solid black.
- The width of the container is now a full 250 with a 15px margin between containers.
- The responsive break points no longer remove parts of the blocks (description and ratings used to get removed on tablets and smartphones)
Here are a couple shots from the FINAL tweaks.
Upvote
1