{"title":"New Carousel Demo","description":"\u003cbody\u003e\n\u003cstyle\u003e\n.carousel-inner{\n\theight:550px;\n\tbackground-color:RGB(20,20,20)\n}\n.carouselImage{\n\tobject-fit:contain;\n\theight:500px;\n\twidth:82%;\n}\n.carousel-control-next{\n\twidth:9%;\n}\n.carousel-control-prev{\n\twidth:9%;\n}\nhr{\n\tmargin:10px;\n}\n#switch{\n\tfloat:right;\n\tmargin-right:20px;\n\tfont-size:0px;\n}\n#vertical{\n\theight:40px;\n\twidth:2px;\n\tbackground-color:RGB(150,150,150);\n\tdisplay:inline-block;\n}\n.switchOption{\n\tvertical-align:top;\n\tbackground-color:RGB(240,240,240)\n}\n#switchOne{\n\tborder-radius: 3px 0px 0px 3px;\n}\n#switchTwo{\n\tborder-radius: 0px 3px 3px 0px;\n}\n.switchChoice{\n\tbackground-color:RGB(70, 125, 240)\n}\ndiv.col-sm:nth-of-type(1){ padding-left:0px;}\ndiv.col-sm:nth-of-type(2){ padding-right:0px;}\n\u003c\/style\u003e\n\u003cscript\u003e\nvar selected=0;\nfunction flop(){\n\tselected=(selected+1)%2\n\tdocument.getElementById(\"switch\").getElementsByTagName(\"img\")[selected].classList.add(\"switchChoice\")\n\tdocument.getElementById(\"switch\").getElementsByTagName(\"img\")[(selected+1)%2].classList.remove(\"switchChoice\")\n\tdocument.getElementsByClassName(\"bulleted\")[selected].style.display=\"block\"\n\tdocument.getElementsByClassName(\"bulleted\")[(selected+1)%2].style.display=\"none\"\n}\n\u003c\/script\u003e\n\u003cdiv class=\"container-fluid\"\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-sm\"\u003e\n    \u003cdiv id=\"showcase\" class=\"carousel slide\" data-ride=\"carousel\"\u003e\n\t\t\u003cdiv class=\"carousel-inner\" align=\"center\"\u003e\n\t\t\t\u003cdiv class=\"carousel-item active\"\u003e\u003cimg class=\"carouselImage\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/ggg.png\" title=\"The logo\" alt=\"The logo\"\u003e\u003c\/div\u003e\n\t\t\t\u003cdiv class=\"carousel-item\"\u003e\u003cimg class=\"carouselImage\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Concrete_Blanket.jpg\" title=\"A concrete blanket\" alt=\"A concrete blanket\"\u003e\u003c\/div\u003e\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"carousel-control-prev\" href=\"#showcase\" data-slide=\"prev\"\u003e\n\t\t\t←\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"carousel-control-next\" href=\"#showcase\" data-slide=\"next\"\u003e\n\t\t\t→\n\t\t\u003c\/div\u003e\n\t\t\u003cul class=\"carousel-indicators\"\u003e\n\t\t\t\u003cli data-target=\"#showcase\" data-slide-to=\"0\" class=\"active\"\u003e\n\t\t\t\u003c\/li\u003e\n\u003cli data-target=\"#showcase\" data-slide-to=\"1\"\u003e\n\t\t\u003c\/li\u003e\n\u003c\/ul\u003e\n\t\u003c\/div\u003e\n  \u003c\/div\u003e\n\t\u003cdiv class=\"col-sm\"\u003e\n\t\t\u003ch3\u003eAbout\u003c\/h3\u003e\n\t\t\u003cp\u003eThis is the demo of the new carousel design, which was made to emphasize the controls, make the image more visible, and make the image match its original dimensions.\u003c\/p\u003e\n\t\t\u003chr\u003e\n\t\t\u003cdiv id=\"switch\" onclick=\"flop()\" onkeypress=\"flop()\" tabindex=\"0\"\u003e\n\t\t\t\u003cimg id=\"switchOne\" class=\"switchOption switchChoice\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Lines.png\" alt=\"Switch to product description\"\u003e\n\t\t\t\u003cdiv id=\"vertical\"\u003e\u003c\/div\u003e\n\t\t\t\u003cimg id=\"switchTwo\" class=\"switchOption\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0548\/8351\/6595\/files\/Page.png\" alt=\"Switch to product literature\"\u003e\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"bulleted\"\u003e\n\t\t\t\u003ch3\u003eDescription\u003c\/h3\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003eLess image strechting.\u003c\/li\u003e\n\t\t\t\t\u003cli\u003eMore visible controls.\u003c\/li\u003e              \n\t\t\t\u003c\/ul\u003e\n\t\t\u003c\/div\u003e\n\t\t\u003cdiv class=\"bulleted\" style=\"display:none\"\u003e\n\t\t\t\u003ch3\u003eProduct Literature\u003c\/h3\u003e\n\t\t\t\u003cul\u003e\n\t\t\t\t\u003cli\u003e\u003ca target=\"#\" href=\"\"\u003e Important link\u003c\/a\u003e\u003c\/li\u003e\n\t\t\t\u003c\/ul\u003e\t\t\n\t\t\u003c\/div\u003e\t\t\n\t\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c\/body\u003e","products":[],"url":"https:\/\/forshor.com\/collections\/new-carousel-demo.oembed","provider":"For-Shor","version":"1.0","type":"link"}